その1に続いてその2です。

「構造疑似クラス」と「擬似要素」をまとめてみました。

前記事の繰り返しになりますが、「Chrome・Firefox・IE11・Edge・（Safari）」で「そろそろ使えるようになった」CSSセレクタであり、全セレクタの一覧・網羅ではないのでご注意ください。

構造擬似クラス

会話内で「構造」といちいちつけることは少ないと思いますが、「リンク擬似クラス」などと分類されているという認識が持てれば良いと思います。

構造擬似クラスの殆どはCSS3が初出なため、ブラウザの実装が追い付いていないものが多少あります。

:nth-child(n)

兄弟要素のグループの中で先頭から数えてn番目の要素を指定可能です。

この後に出てくる:nth-of-typeに比べると直感的ではないかもしれません。

section p:nth-child(2){
color: #ff0000;
}
/* この書き方は4番目の要素が「p」でない場合は効かないので注意 */
/* つまり4番目に登場するp要素に効くという意味ではない。 */
section p:nth-child(4){
color: #ff0000;
}
/* 8番目の要素を指定している */
section :nth-child(8){
color: #0000ff;
}

:nth-last-child(n)

:nth-child(n)が先頭から数えるのに対してこちらは末尾から数えてn番目の要素を指定可能です。

数える方向が逆になるだけなので、サンプルコードは割愛します。

:first-child

:nth-child(1)と同じと考えて問題ないでしょう。先頭から数えて1番目ということです。

:last-child

:nth-last-child(1)と同じと考えて問題ないでしょう。後ろから数えて1番目ということです。

:nth-of-type(n)

兄弟要素のグループの中で先頭から数えてn番目の要素を指定可能です。

:nth-child(n)に比べ、指定した要素の何個目の要素（p要素の3個目など）を指定するというものなので直観的です。

引数nの箇所は計算式を入れることもできますし、「even」や「odd」の指定が可能なので、偶数・奇数が簡単にできるようになっています。

/* 3個目のp要素に効く */
section p:nth-of-type(3) {
color: #ff0000;
}
/* 偶数個目のp要素に効く */
section p:nth-of-type(even) {
color: #0000ff;
}

:nth-last-of-type(n)

:nth-of-type(n)が先頭から数えるのに対してこちらは末尾から数えてn番目の要素を指定可能です。

数える方向が逆になるだけなので、サンプルコードは割愛します。

:first-of-type

:nth-of-type(1)と同じと考えて問題ないでしょう。先頭から数えて1番目ということです。

:last-of-type

:nth-last-of-type(1)と同じと考えて問題ないでしょう。後ろから数えて1番目ということです。

:only-child

兄弟要素が1つしかない要素を指定可能です。

1個しかない場合にデザインを調整したいというケースは度々ある気がします。

「:first-child:last-child」または「:nth-child(1):nth-last-child(1)」でも同様の指定が可能なので、複数のセレクタを覚えるのが難しい場合は記憶しなくてもいいかもしれません。

section ul li:only-child {
color: #ff0000;
}

:only-of-type

兄弟要素の中で1つしかない要素を指定可能です。

複数回出てくる場合はこうして、1回しか出てこない場合はああするといったケースは、ありそうで無いような気がします。

b:only-of-type {
color: #ff0000;
}

UI要素状態擬似クラス

長い名前ですが、簡単に言えばフォームの入力要素の状態を検知して指定が可能というものです。

:enabled / :disabled

要素が有効な状態（enabled）か無効な状態（disabled）かによって指定が可能です。

使用頻度は高くないかもしれませんが、無効状態のボタンを押せない表現にしたりするのに、いちいちclassを付け替えたりしなくて良かったりするので便利です。

/* 有効な場合 */
input:enabled{
color: #ff0000;
}
/* 無効な場合 */
input:disabled{
color: #0000ff;
}

:checked

ラジオボタンやチェックボックスで選択された要素の指定が可能です。仕様上はセレクトボックスによって選択されたoptionにも可能ですが、ブラウザの問題で効かないと思っておいた方が良いかと思います。

input:checked {
box-shadow: 0 0 0 4px #ff0000;
}

否定擬似クラス

:not(S)

指定のセレクタとは合致しない要素を指定することができます。

使用用途はかなり広く、指定のclassが「ついていないもの」という逆の指定や、「p要素ではないもの」というような指定が可能です。

/* p要素の中でclass「special」がついていないもの */
p:not(.special) {
color: #ff0000;
}
/* p要素ではないもの */
div :not(p) {
color: #0000ff;
}

まとめ

いかがでしたでしょうか。調べ直してみたところCSS3で初出となったセレクタもかなり使えるようになっていました。

「::before」や「::after」は昔から既に広く使われているものと思い、載せませんでした。

また、「:empty」と「:target」についても、まだブラウザの実装に怪しい部分があるようなので載せていませんが、共にとても便利なセレクタですので、条件が許せば使えると便利だと思います。

いつもはclassをつけてしまっている場合でも、少しこれらのセレクタの利用を考えてみてはいかがでしょうか。