【jQuery / CSS】擬似クラスのfirst-childの使い方

2016.07.15

jQueryやCSSでよく使う擬似クラスのfirst-childが効かないという時

イメージ画像
jQueryやCSSで擬似クラスのfirst-childをけっこう使う機会があるのですが、
たまに要素への変更などが反映されないと勘違いしてしまう時があります。

たとえば下記のHTMLの場合、
HTML:
●●●

◯◯◯

◯◯◯

◯◯◯

#parent内の最初のpタグに何かしらのスタイルを適用しようとして、
CSS:
#parent p:first-child {
    color: red;
}
と記載しても反映されません。

擬似クラス first-childの考え方

上記の記述が反映されない原因は実はfirst-childが、
「ある要素内の特定の子要素の1番目」ということではなく、
「ある要素内で最初に記述された1番目の要素」ということになるので、
スタイル等が反映されないという状況になります。

なので、
先ほどのHTMLでfirst-childで反映できるCSSの処理としては、
CSS:
#parent div:first-child {
    color: red;
}
と記載するか、
CSS:
#parent *:first-child {
    color: red;
}
と記載すればfirst-childで指定したスタイル等は反映されます。
でもこれだとdivに対してでしか対応できません。

これはdivが
ある要素内(#parent内)で最初に記述された1番目の要素(div)なので、
first-childでの変更が効くということになります。

pタグにスタイル等の処理を反映したい場合は…

しかし目的は一番目のpタグに処理を反映することです。

なので一番目のpタグにスタイル等を反映したい場合は、
反映されない「first-child」でスタイル等を指定するのではなく、
「nth-child(n)」を使用すれば対応することができます。

例えば、
CSS:
#parent p:nth-child(2) {
    color: red;
}
という形で記述すれば、
#parent内の一番目のpタグにスタイル等が反映されます。

考え方としては、
#parent内の2番目に位置するpタグということとなります。
アスタリスクを使って、
CSS:
#parent *:nth-child(2) {
    color: red;
}
と記述しても同じ結果となります。

first-childのまとめ

first-childは親要素内の1番目の要素(長男)、
nth-child(n)は親要素内のn番目の子(n男)という認識を忘れないようにすれば、
こういった認識違いのミスは防げると思います。

自分は最初にこういったミスが多くおぼえも悪かったので、
HTML:
●●●

◯◯◯

◯◯◯

◯◯◯

という感じで頭でおぼえて対応するようにしていました。
まだたまに忘れてしまうのですが…

擬似クラスは他にもたくさんあるので想定と実際の反映される状態が違うことがあれば、
もしかして…と疑って調べてみることをオススメします。
← 【jQuery RWD Image Maps】レスポンシブサイトでイメージマップ(クリッカブルマップ)を使えるjQueryプラグイン
フランス語の特殊文字を実体参照を使ってHTMLで表示する →