:first-child の使い方を勘違いした

:first-child擬似クラスは、IE7から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。

:first-child擬似クラスは、親要素の一番最初の直下の子要素に適用されます。

正しくない例1

css

articleの最初の子要素は「h2」なので適用されません。

【解決方法1】 隣接セレクタを使う

DEMO

【解決方法2】 :first-of-typeを使う

:first-of-type疑似クラスとは、指定した種類の最初の要素に適用される。
対応しているのはIE9以降なのでそこ注意

css

DEMO

間違った例:2

これは全くの勘違い。親要素に:first-childをつっくければ、その最初の子要素に自動的にスタイルが適用されると思っていたという恥ずかしい話。

間違ったcss

正しくは

DEMO

SNSでもご購読できます。