【CSS】特定の要素「以外」を指定する:not()否定クラスの使い方

例①

このようなHTMLだとします｡

<ul>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li class="target">特定の要素</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

このようなCSSを書くと

ul li:not(.target) {
	color: red;
}

こうなります｡

.target以外が赤くなっていますね｡

もう一度､セレクタを確認してみると

ul li:not(.target)

これで「ulの中のli ただし.targetは除く」って意味になります｡

例②

このようなHTMLだとします｡

<ul>
	<li>リスト1-1</li>
	<li>リスト1-2</li>
	<li>リスト1-3</li>
</ul>
<ul class="target">
	<li>リスト2-1</li>
	<li>リスト2-2</li>
	<li>リスト2-3</li>
</ul>

このようなCSSを書くと

ul li:not(.target li) {
	color: red;
}

こうなります｡

「.targetの中のli」以外の「ul li」が赤くなっています｡

例③

このようなHTMLだとします｡

<ul>
	<li>リスト1-1</li>
	<li>リスト1-2</li>
	<li>リスト1-3</li>
</ul>
<ul class="target">
	<li>リスト2-1</li>
	<li>特定の要素</li>
	<li>リスト2-3</li>
</ul>

このようなCSSを書くと

ul li:not(.target li:nth-child(2)) {
	color: red;
}

こうなります｡

「.targetの中の2番目のli」以外の「ul li」が赤くなっています｡

例④

このようなHTMLだとします｡

<div class="target">
	<p>文章1</p>
	<p>文章2</p>
	<div>
		<p>文章3</p>
	</div>
</div>

このようなCSSを書くと

.target p:not(.target > p) {
	color: red;
}

こうなります｡

「.target 直下の p」以外の「.target p」が赤くなっています｡

このように:not()の中は結構自由に書けて､否定したいセレクタを入れれば否定されます｡

コメント