擬似クラス

: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

nth-child、last-childをie8でも使いたい

カラムを横並びにしたいときに:nth-childは便利です。

でもIE8以下は対応してません。

※ :first-child は、ie7から対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

HTML

CSS(ie8 非対応)

この状態でie8で確認すると…

ie8_pre

カラム落ちしてます。

ie8に対応させるためには、以下のスタイルシートを付記。

4番めと8番目を「+*」で指定してます。

ie8_after

でも、これだと、カラム数が決まっている場合はいいのですが、もっとカラムが多くなったり、いくつになるかわからない場合は、現実的じゃないですね。

やはりjavascript での対応になるでしょうか

IE8以下でもCSS3に対応する「selectivizr」
http://selectivizr.com/

Selectivizr   CSS3 pseudo class and attribute selectors for IE 6 8

Selevtivizrは、jQurey,mootoolsなどのライブラリが必須です。

また、スタイルシートは外部ファイルとして読み込む必要があるとのこと。