Google Adsense を導入したところ、既存のCSSが干渉してしまったので解消した

どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか？
初めての方、いらっしゃい！
複数回目の方、再訪問ありがとです(・∀・)

Google Adsense を導入しました。（2回目）

すると、既存のCSSにあるinsタグのスタイルシートと干渉してしまいました。

それの解消方法を書いていきますね。

まずは、Before / After を示します。

Before

After

CSSの変更点

/* insタグ */

ins{

	text-decoration: none;

	border-bottom: dotted #0000ff;

}

/* insタグ */

ins:not(.adsbygoogle):not(.ee){

	text-decoration: none;

	border-bottom: dotted #0000ff;

}

変更点は2行目の:not(クラス名)を2つ重ねているところです。

:not(クラス名)とすると、指定したクラス名を除き適用するスタイルシートになります。

が、Google Adsenseで挿入される ins タグのクラスは2種類ありました。

そこで :not(クラス名１):not(クラス名２) とすることで、クラス名１でもクラス名２でもない場合に適用するスタイルシートにしました。

これまでも :not(クラス名) は使ったことがあったのですが、複数クラス指定は使ったことがなかったので勉強になりました。(・∀・)

ここまではOKだ