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

2023-12-30

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

基本的には､CSSの基本となる~(後続兄弟結合子)や+(次兄弟結合子)を使った方法です｡

これらを応用した「逆」も紹介しています｡

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

HTML

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

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

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

ul li.target ~ li {
	color: red;
}

CSSの基本ですが「~」で連結すると「それより後の並列の要素」という意味になります｡

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

「.target」より後が「li」とは限らない場合は､このように書いてください｡

.target ~ * {
	color: red;
}

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

先程に加え.target自身も追加してあげます｡

ul li.target,
ul li.target ~ li {
	color: red;
}

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

「.target」以降が「li」とは限らない場合は､このように書いてください｡

.target,
.target ~ * {
	color: red;
}

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

ul li.target + li {
	color: red;
}

こちらもCSSの基本ですが「+」で繋ぐと「その次の要素」という意味になります｡

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

「.target」直後が「li」とは限らない場合は､このように書いてください｡

.target + * {
	color: red;
}