CSS3入門道場

疑似クラス、疑似要素

この章では、疑似クラスと疑似要素を見て行きます。これらのセレクターは、今までのセレクターと異なり、HTMLの木構造ではなく、その要素の状況・状態、表示順などによるセレクターです。疑似クラスはあくまで特定の要素にCSSを適用しますが、疑似要素では、要素の一部分のみにCSSを適用させるなどが可能になります。これもCSS2.1から存在するものとCSS3から存在するものがありますが、以前からあるものも一部併せて見て行きます。

メニュー

参考リンク

ブラウザサポート

本章で紹介する疑似クラス、疑似要素は、::selectionを除きどのブラウザでもサポートしています。::selectionについては、デスクトップは良好(但し、Firefoxではベンダープレフィックスが必要)。モバイルは下記リンクをご覧下さい。

参照:Can I use
CSS3 selectors
::selection CSS pseudo-element

:first-child、:first-of-type

:first-child

:first-childは、親要素に対する最初の子要素を全て選択します。これは、CSS2.1の時からあります。サンプルを見てみましょう。

li:first-childは、LI要素の中の(その親に対する)最初の子供全てがマッチしますので、「太郎」と「リンゴ」が赤文字になります。 更に理解を深めるために、次のより違いが分かり易い例を見てみましょう。

この結果は、以下のようになります。

赤文字になったのは、「パラグラフA」のみです。「パラグラフ1」もと思いたいところですが、「パラグラフ1」の親のbodyから見ると、「パラグラフ1」は、2番目の子供なのでNGなのです。(1番目は「<div>始めに</div>」の為)

:first-childは、親要素から見て、最初の子供(first-child)でなければならないからです。LI要素の場合は、もっぱらUL又はOL要素の中にあるので分かり易いですが、それ以外の要素で使うとどれが該当するか分かりにくくなります。そもそも親要素の種類を指定することもありませんので。first-childは、最初の段落だけ強調したい(orマージンを大きく取りたい)などの場合に使えます。

:first-of-type

first-childの上記の例では、「パラグラフ1」は、2番目とカウントされてしまいました。それは、1番目にDIVがいたからです。しかし、P要素を選択しようとしているのだから、P要素だけでカウントしたい時があります。そんな時は、:first-of-typeを使います。同じタイプ(type)のタグだけでカウントしますので、先の例において、

と指定した場合は、DIVはカウント対象にならない為、「パラグラフ1」も赤文字になります。

:last-child、:last-of-type

:first-child、:first-of-typeが、「最初」の要素が対象になっていたのに対し、こちらは「最後」の要素が選択対象になります。その他の用法は同じですので、省略させていただきます。

Copyright 2015 CSS3入門道場 All Rights Reserved.