somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【CSS】CSSだけで特定番目の要素にスタイル適用する

Twitter Bootstrapに触れていたら見つけたのでメモしておきます。

今まで

今までは、phpなどのサーバサイドで調べたり、Javascriptで調べる必要がありましたが、CSS3では調べるためのnth-childというものが存在します。

nth-child

nth-childのあとに()と、()の中にある数字をあらわすnと、数字を組み合わせて特定の要素にスタイルを適用します。

挙動

最後からを基準にする「nth-last-child」もありましたので、それぞれ試してみました。firebugで下記のlast部分と、数字や符号を変更しながら試しました。

.table tbody tr:nth(-last)-child(xxx) {
 background-color: red;
}
記述nth-childnth-last-child
(1)最初最後
(2)2番目最後から2番目
(2n)偶数
(2n+1)奇数
(-n+2)最初の2つ最後の2つ
(n+2)2番目とそれ以降最後から2番目とそれ以前