CSSはその登場当初から現在に至るまでにさまざまな進化を遂げており、ひと昔であれば複雑なJavaScriptで書かないといけないような所作も、驚くほど簡単にできるようになりました。

とりわけCSSの進化が著しかったのはCSS3(CSS Level 3)が登場してからで、単純な挙動しかできなかったこれまでのCSSに、複雑な処理を実装できるようになりました。
それぞれセレクタやプロパティはCSS3に次ぐ次世代のCSSだと評されています。

そこで今回は、CSS Level 4で登場した、知っておくと便利なCSSセレクタをご紹介します。

知っておくと便利なCSSセレクタ5選

CSS Level 4には、例えばnth-childのようなよく知られているセレクタもたくさんありますが、それ以外にもユニークなセレクタが含まれています。
それらの中には新しい多くの便利な擬似セレクタもあり、覚えておいて損はありません。
早速それらのセレクタを確認してみましょう。

1. :matches()

*:matches()*擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。

例えば、以下のようなコードがあるとします。

section h1,
section h2,
section h3,
section h4,
section h5,
section h6, 
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
　　color: #0060e6;
}

こうしたコードは、同じ規則で並んでいながらも、それらをそのまま並列して記載しているので、コードが冗長になりがちです。
しかし、*:matches()*を使えば、このような規則的な並列を有したコードを、下記のようにシンプルにまとめることができます。

:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) {
　　color: #0060e6;
}

これを使えば、例えばリンクの通常時とホバー時などで色を変えることも簡単にできます。

:matches(:hover, :focus, :active) {
　　color: #0060e6;
}

ただし、現状*:matches()はSafariには対応していますが、FirefoxやChromeではベンダープレフィックス対応で:any()*擬似クラスを使うことになっているので、下記のように併記したほうがよさそうです。

:-webkit-any(:hover, :focus, :active) {
　　color: #0060e6;
}

:-moz-any(:hover, :focus, :active) {
　　color: #0060e6;
}

また、*:matches(:matches())のように入れ子構造にすることはできず、:not()*とも組み合わせて利用することはできないので、注意しましょう。

2. :any-link

先ほど紹介した*:matches()を使えば、リンクのスタイリングを設定するのも驚くほど簡単に行うことができます。
しかし、リンクに限って言えば、もっと簡単な方法があります。
それが、:any-link*擬似クラスを使うことです。

この擬似クラスは、すべてのハイパーリンクのアンカーテキストに同じスタイルを加えることができます。

:any-link {
　　color: #0060e6;
}

HTML5に限って言えば、href(ハイパーリファレンス)属性を設定できるHTMLタグ(要素)は、aタグだけでなくlinkタグやareaタグなどがあります。
これらのタグに*:any-linkを設定することで、:matches(:link, :visited)*と同じ挙動を実装することができます。

3. :placeholder-shown

テキストボックスやテキストエリアのように、プレイスホルダーを設定することができる要素があります。
プレイスホルダーのテキストはHTMLタグのplaceholder属性で設定することができますが、このプレイスホルダーのテキストはCSSの*:placeholder-shown*擬似クラスを使ってスタイリングすることができます。

:placeholder-shown {
　　opacity: 1;
　　color: #cccccc;
　　background: #f0f8ff;
　　font-weight: bold;
　　border: 1px solid red;
}

この*:placeholder-shownはインプット要素全体に対してスタイリングを行うことができます(つまり、プレイスホルダーテキストが表示されている間のボックス全体のスタイリングとなります)。
一方で、コロンを2つ重ねた::placeholder*擬似要素は、プレイスホルダーテキストのみのスタイリングとなります。

つまり、先ほどのコードは以下のコードでも代用できますが、borderの適用範囲に注意が必要です。

::placeholder {
　　opacity: 1;
　　color: #cccccc;
　　background: #f0f8ff;
　　font-weight: bold;
　　border: 1px solid red;
}

注意したいのは、:placeholder-shownは擬似クラスであり、::placeholderは擬似要素と呼ばれ、根本的に設計思想が異なることです。
前者はある状態における要素のスタイリングであり、後者はDOMの中では扱うことのできない可視要素そのものだということを理解して、使い分けるのがよいでしょう。

4. :user-error

同じく、テキストボックス関連の擬似クラスをご紹介します。
エラーを知らせる時のスタイリング方法である、:user-error擬似クラスです。

もちろん、エラーを知らせるためのスタイリング方法ですから、デフォルトでは表示されず、何らかのユーザー操作のあとにエラーが発生したときにだけ表示されます。
例えば、ユーザーが送信ボタンを押してフォームを送信しようとしたときに、required属性のついた入力必須のインプットに何も入っていない場合、このスタイルが指定されて入ればスタイリングが反映される、という具合です。

:user-error {
　　background: #ffc0cb;
　　color: #dc143c;
　　border: 2px solid red;
}

ただし、残念ながらこの*:user-error擬似クラスは全てのブラウザベンダーで実装されているわけではありません。
場合によっては、:invalid擬似クラスや:required*擬似クラスを使って、ユーザーにエラーを知らせる方法も検討してみましょう。

:invalid {
　　background: #ffc0cb;
　　color: #dc143c;
　　border: 2px solid red;
}

参考：
コーディング初心者こそ知っておきたい「CSS擬似クラス」超入門
▲ :invalidや*:required*はこちらの記事で紹介しています。

5. :root

:rootは次第に有名になりつつある擬似クラスの一つです。
ルート要素にスタイルを適用するためのものです。
ルート要素は最上位の階層に位置する要素のことで、HTML文書では全体をマークアップしているのがルート要素となります。

:root{
　　background-color: #fafad2;
}

body{
　　background-color: #f0f8ff;
}

上記のようなコードの場合、backgroundの色は*:root*で指定した色が全体的に敷き詰められ、bodyで指定した色はルート要素の内側に表示されます。

なお、:rootには*CSS変数(CSSカスタムプロパティ)*を使うこともできます。
CSS変数を使うことでデザインが圧倒的に捗るので、ぜひ使い方をチェックしてみるとよいでしょう。

参考：
CSSでプログラミング？圧倒的にデザインが便利になる「CSSカスタムプロパティ」入門｜ferret フェレット