CSSの特殊なセレクターの書き方使っていますか？

まえおき

みなさん特殊なCSSのセレクター書いていますか？
>・+・~を使用した指定はよく使うと思います。

今回はあまり触れる機会は少ないけど覚えておくとよさそうなセレクターを紹介していきます。

属性セレクター

こちらを利用することでHTMLのタグにある属性（id,class,hrefなど）の存在・値の有無に対してスタイルをあてることができます。
よくあるのはaタグのhrefの指定によってアイコンを変えたり、
inputのtypeやchecked等状態によって表示を変える場合があります。

基本的にはclassを別途用意してケースに合わせてスタイルをあてるのがベストかと思いますが、臨機応変に使い分けていけると便利かなと思います。

属性が存在する場合

p[title] {
  color: red;
}

一致する場合

input[type="text"] {
  color: red;
}

始まりに指定した値が含まれる場合

a[href^="https://"] {
  color: red;
}

終わりに指定した値が含まれる場合

a[href$=".pdf"] {
  color: red;
}

どこかに指定した値が含まれる場合

a[class~="img"] {
  object-fit: cover;
}

大文字小文字を区別

末尾にiをつけることで大小区別しません。

a[href*="a" i] {
  color: red;
}

区別する場合はsをつけます。

a[href*="A" s] {
  color: red;
}

始まりと終わりが一致する場合

複数指定も可能です。

a[href^="https://"][href$=".pdf"] {
  color: red;
}

:not()

指定されたセレクターが一致しない場合にスタイルをあてることができます。
　

使用例として、.pinkが存在する場合はスタイルをあてないようにできます。

<p class="text pink">
    テキストテキスト
</p>

<p class="text red">
    テキストテキスト <!-- このテキストにだけスタイルをあてたい -->
</p>

.text:not(.pink) {
  font-size: 22px;
}

　
連結することで、どちらか含まないにすることも可能です。

.text:not(.pink):not(.red) {
  font-size: 22px;
}

:is()

指定されたセレクターが一致する場合にスタイルをあてることができます。

以前は:matches()でしたが改名されて:is()になりました。

使用例として、.pinkと.redが含まれる.textにだけスタイルをあてたい場合は以下のように記述します。

<p class="text pink">
    テキストテキスト
</p>

<p class="text red">
    テキストテキスト
</p>

.text:is(.pink,.red) {
  font-size: 22px;
}

　
:is()を使わない場合と比べて簡易に書けるようになりました。

/* :is()を使わず指定する場合はこう */
.text.pink,
.text.red {
  font-size: 22px;
}

:where()

:is()と似たなものに:where()があります。

:where() と :is() の違いは、 :where() は詳細度が常に 0 であるのに対して、 :is() は引数内で最も詳細度の高いセレクターの詳細度を取ります。

CSSは、基本的には上に書いた順に上書きされていきます。
:where()による実装は従来通り書いた順に上書きされていきますが、
:is()の場合はセレクターの詳細度によって上書きの優先順が変わります。
これらは使用状況やマークアップの構造によって適宜使用をわけていく必要がありそうです。

:has()

指定されたセレクターが存在する場合にスタイルをあてることができます。
　
このセレクターの良いところはJavaScriptに頼らず、子要素の存在によって親要素のスタイルを変更できる点です。
例えば<img>が動的で存在の有無がわからない場合にスタイルの適用を分けることができます。

<div class="box">
  <p>テキスト</p>
  <img src="hoge.png">
</div>

<div class="box">
  <p>テキスト</p>
</div>

.box:has(img) {
  background: red;
}

　

:nth-of-type(3)で絞ればそれ以上の子要素数があった場合にスタイルをあてることもできます。
（JavaScriptを使用せず要素数で絞れるならどこかで使い道はありそう）

/* imgが3つ以上の時は背景を赤色にする */
.box:has(img:nth-of-type(3)) {
  background-color: red;
}

:empty

逆に:emptyを使用すると、子要素が存在しない場合のみスタイルをあてることができます。

<div class="box"><!-- 子要素が存在しない場合にスタイルをあてる --></div>

<div class="box">
  <p>テキスト</p> <!-- こちらは存在するのであたらない -->
</div>

.box:empty {
  background: red;
}

子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の content は要素が空であるかどうかの判断には影響しません。

とmozillaにあるように、改行やスペースが入っていると子があると判定されてしまうので注意です。

さいごに

工夫するとJavaScriptに頼らずCSSのみで解決できるシーンが出てきて僅かながら進化を感じます。
ただ、CSSだけでは不便に感じる個所もあるので、SCSS等を駆使して良いコーディングをしていきましょう。
(次の要素は指定できるのに前の要素指定できないのは不便なので-実装してください。お願いします。)