【CSS】特定の要素より前の要素を指定する方法

「以前」

以下のように:not()を使用することで特定の要素(.targetの要素)以前の要素が指定できます。

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

「より前」

:not(.target)を追加することで特定の要素(.targetの要素)を含まないようにできます。

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

「直前」

:has()を使用して以下のように記述すると直前の要素を指定することができます。

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