コーディング初心者こそ知っておきたい「CSS擬似クラス」超入門

ページ印刷の状態に関する擬似クラス

現在ではあまり使わなくなってしまったかもしれませんが、ページ印刷に関する擬似クラスがあるので、紹介させていただきます。

ページ印刷に関する指定には、「@page」を使うという取り決めがあります。
この後に、例えば*:firstをつけることで複数の印刷ページのうち、最初のページにのみスタイルを適用することができます。
ページの最後には:last*で対応可能です。

@page:first {…}

また、:leftや*:rightを指定することで、ページの左右に対してそれぞれスタイルを適用できます。
さらに、:blank*の場合は空ページに関してスタイルを適用することが可能です。

要素の順番に関する擬似クラス

:nth-child() と :nth-last-child()

ある要素の中に複数の同一要素を入れ子にしておく場合などに、ある規則に従って特定の要素にだけスタイルを指定したい場合には、こちらが便利です。
例えば、ul中のli要素で、偶数と奇数を分けたい場合などです。

:nth-child()のカッコの中身には、整数とnの倍数(nには0か星の正数)を指定することができます。
例えば奇数の場合は、:nth-child(2n-1)や:nth-child(odd)、偶数の場合は*:nth-child(2n)や:nth-child(even)*を指定することができます。

tr:nth-child(even):hover {…}

また、*:nth-child(5)*のように、直接n番目の数を指定することもできます。

*:nth-last-child()*は終わりの要素からの順番でスタイルを適用します。
例えば、*nth-last-child(1)*であれば、常に終わりの要素だけにスタイルを適用することができます。

また、:first-childと*:last-childはそれぞれ:nth-child(1)や:nth-last-child(1)*と同じ挙動をすることを知っておくとよいでしょう。

:nth-of-type() と :nth-of-last-type()

*:nth-child()*の場合には、種類に関係なく要素を数えていきました。
一方、*nth-of-type()*の場合には、途中で別の種類の要素が入る場合にはそれを数えずに、指定した種類の要素のみを数えてスタイル適用の対象が決定されます。

また、:first-of-typeと*:last-of-typeはそれぞれ:nth-of-type(1)や:nth-last-of-type(1)*と同じ挙動をすることを知っておくとよいでしょう。

:not()

*:not()*はカッコ内に指定したもの以外での条件で適用される擬似クラスです。

例えば、段落が*:last-child*ではない場合を考えると、次のようになります。

p:not(:not(:last-child)) {…}

ただし、注意してほしいのは、*:not(:not(…))のように:not()*を入れ子にすることはできません。

その他知っておくと便利な擬似クラス

::after と ::before

::afterや*::before*はコンテンツをある要素の前後に差し込む時に使います。

例えば、リンクの後ろにリンクの鎖を意味するアイコンを設置したい場合には、次のように指定します。

a::after {
　　content: url(external-link.png);
}

::first-letter と ::first-line

スクリーンショット：2017年9月

::first-letterはテキスト要素の最初の文字、::first-lineはテキスト要素の最初の段落にスタイルを適用します。

p::first-letter {…}

::selection

スクリーンショット：2017年9月

::selectionは、マウスカーソルでテキストなどを選択してハイライトしたときのスタイルを指定することができます。

blockquote::selection {
　　background-color: #0060e6;
　　color: white;
}