【CSS】特定の要素「以前」や「より前」「直前」を指定するセレクタ

2022-04-06 2023-08-01

CSSで特定の要素以前やより前､直前を指定するセレクタの書き方をご紹介します｡

兄弟要素「~」や､否定「:not()」､擬似クラス「:has()」などを駆使して指定します｡

HTML

共通で､このようなHTMLを使います｡

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

特定の要素以前を指定するにはこう｡

:not()を使い「.target」より後の「li」を否定します｡

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

「.target」以前の「li」が赤くなりました｡

特定の要素より前を指定するにはこう｡

先ほどに「:not(.target)」を加え.target自身も否定してあげます｡

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

「.target」より前の「li」が赤くなりました｡

特定の要素の直前を指定するにはこう｡

「:has()」を使い､兄弟要素に.targetを持つliを指定します｡

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

「.target」直前の「li」が赤くなりました｡

ただし､:has()は2023年現在FireFoxでサポートされていませんのでご注意ください｡