問題
特定の要素だけ、CSSの設定を除外したい。
解決策
「:not()」で、特定の要素だけを除外するように設定する。
特定の要素を除外する疑似クラス「not」
マークアップ作業をしていると、特定の要素だけはその設定を受けさせたくない場面は多く出てくるのではないでしょうか。
今回は特定の要素だけを除外する時に使える疑似クラス「not」をご紹介します。
まず、HTMLの構築を行います。
Ulタグを構築します。
例として、このulタグ内のliタグに対し、オレンジの文字色を設定します。
そして今回は2番目と6番目のliタグにクラス「escape」を付与してみます。このクラス「escape」の付いたliタグにはオレンジの文字色にならないように設定していきます。
便宜上、ここではulタグに「colors26」というクラスを設定しています。
<ul class="colors26">
<li>1番目</li>
<li class="escape">2番目</li>
<li>3番目</li>
<li>4番目</li>
<li>5番目</li>
<li class="escape">6番目</li>
<li>7番目</li>
<li>8番目</li>
<li>9番目</li>
<li>10番目</li>
</ul>次にCSSの構築を行います。
ulタグのクラス「colors26」の中のliタグに対し、「:not(.escape)」と設定することで、クラス「escape」の付いていないのliタグに対し、CSSを設定することができます。
形式としては「:not(除外したいセレクタ)」で設定を行うことができます。
例として、文字色をオレンジ色に設定します。
.colors26 > li:not(.escape){
color: #F15A24;
}
DEMOはこちら
- 1番目
- 2番目
- 3番目
- 4番目
- 5番目
- 6番目
- 7番目
- 8番目
- 9番目
- 10番目
コメント