[CSS3] 先頭の要素にだけ別の設定をする（疑似クラス「:nth-child(n)」を覚えた）

Webデザインにおいてカラムをいくつか並べて、間に境界線を引くという場合がよくあります。

イメージ

こういう場合これまで、1行目の2要素に適当なクラス名を付けた上で、それ以外の要素にborderを設定する…というような対処を行ってきました。

ソース例

#sample-list li {
padding: 20px;
border-top: solid 1px dotted;
}
#sample-list li.first {
border-top: none;
}

表現としては大体それで上手くいくのですが、HTMLに先頭要素がどれであるかを記述する必要があり、往々にして何らかのプログラムまたはスクリプトで対応する必要が出てきてしまいます。それがどうも面倒くさい。出来ればCSSだけでなんとかしたい。

で、探した結果が、CSS3で採用される「:nth-child(n)」でした。
それを加えるとこんな感じになります。

変更後のソース例

#sample-list li {
padding: 20px;
border-top: solid 1px dotted;
}
#sample-list li:nth-child(1) {
border-top: none;
}

リストが入れ子になる可能性を考えるとこっちの方が良いかも

#sample-list li {
padding: 20px;
border-top: solid 1px dotted;
}
#sample-list > li:nth-child(1) {
border-top: none;
}

これでスマートに実現できます。楽。

:nth-child(n)の応用あれこれ

そういうわけで疑似クラス「:nth-child(n)」を覚えたわけですが、(n)の部分には具体的な数字だけで無く、色んな要素を指定できるようです。参考にしたのはこのあたりの記事。

Useful :nth-child Recipes | CSS-Tricks
[CSS3小ネタ]CSS3でシマシマの表をつくる — :nth-child – EC studio デザインブログ

偶数番目にだけ適用する

#css3-sample-list-1 li:nth-child(even){ background-color: #ccc; }

sample line 1
sample line 2
sample line 3
sample line 4

#css3-sample-list-1 li:nth-child(even){
background-color: #ccc;
}

偶数の場合は「even」。奇数の場合であれば「odd」になります。

x番目ごとに適用する

#css3-sample-list-2 li:nth-child(3n){ background-color: #ccc; }

sample line 1
sample line 2
sample line 3
sample line 4
sample line 5
sample line 6

#css3-sample-list-2 li:nth-child(3n){
background-color: #ccc;
}

nは0以上の整数。「3n」というのは「0, 3, 6, 9 …」という整数の集合になります。

先ほどの「偶数」は「2n」、「奇数」は「2n-1」でも代用できます。

最初のx個だけに適用する

#css3-sample-list-3 li:nth-child(-n+2){ background-color: #ccc; }

sample line 1
sample line 2
sample line 3
sample line 4
sample line 5
sample line 6

#css3-sample-list-3 li:nth-child(-n+2){
background-color: #ccc;
}

先ほどと同様にnは0以上の整数なので、「-n+2」というのは「…, 1, 2」という整数の集合になります。

TOP10ランキングの上位3つだけフォントを大きくするとか言うときに使えそうです。

x番目以降に適用する

#css3-sample-list-4 li:nth-child(n+3){ background-color: #ccc; }

sample line 1
sample line 2
sample line 3
sample line 4
sample line 5
sample line 6

#css3-sample-list-4 li:nth-child(n+3){
background-color: #ccc;
}

「n+3」というのは「3, 4, 5, 6 …」という整数の集合になります。

なるほど！わかりやすい！

なによりHTMLを一切いじらなくて良いのが素敵。

ちょっと使っていこうかなぁと思います。
（他のCSS3も見てみるかー）

おまけ：互換性は？

今のところ、ほぼ全てのモダンブラウザが対応済みです。Internet Explorerも9では対応済み。ただし、Internet Explorer 8では非対応となっているようです。

CSS に関する互換性と Internet Explorer

Internet Explorerで最も使われているバージョンが「8」である（2011年12月時点）ことを考えると、すぐに採用できるようなものでは無いかも知れませんが…まぁ、個人サイトなら良いかな。。

Internet Explorer 8の人、ごめんね！