「WBS」「ガイアの夜明け」「がっちりマンデー!!」「カンブリア宮殿」などのテレビ番組で気になったニュースからお金と仕事を考えて豊かな生活を目指します。

偶数行や奇数行などだけを指定できるCSS3セレクタ

2016年1月20日

HTML / CSS

CSS3から追加された【nth-child】。 このCSS3セレクタを使用する方法を紹介します。

CSSにて奇数行のみや偶数行のみ背景色を変更したり、最後の要素のみボーダーを追加したりする際に使用する本当に便利です。

  • IE8以前は不可
  • IE9は可能
  • IE10は可能
  • IE11は可能
  • Chromeは可能
  • Firefoxは可能
  • Safariは可能
  • Operaは可能

奇数の要素に適用

    td:nth-child(odd){
        background: #eee;
    }
12345678910

偶数の要素に適用

    td:nth-child(even){
        background: #eee;
    }
12345678910

最初の要素に適用

    td:first-child{
        background: #eee;
    }
12345678910

最後の要素に適用

    td:last-child{
        background: #eee;
    }
12345678910

5番目の要素に適用

    td:nth-child(5){
        background: #eee;
    }
12345678910

最初から4番目までの要素に適用

    td:nth-child(-n+4){
        background: #eee;
    }
12345678910

5番目以降の要素に適用

    td:nth-child(n+5){
        background: #eee;
    }
12345678910

最後から4番目の要素に適用

    td:nth-last-child(4){
        background: #eee;
    }
12345678910

最後から4番目以降の要素に適用

    td:nth-last-child(-n+4){
        background: #eee;
    }
12345678910

最後から4番目以前の要素に適用

    td:nth-last-child(n+4){
        background: #eee;
    }
12345678910

3の倍数の要素に適用

    td:nth-child(3n){
        background: #eee;
    }
12345678910

3の倍数に1を足した要素に適用

    td:nth-child(3n+1){
        background: #eee;
    }
12345678910

使い慣れると非常に便利なセレクタです。
IE8以前には対応していないのが非常に残念です。

  • ブログランキングへ
  • にほんブログ村

カテゴリー:HTML / CSS
タグ:

Comments

  1. […] 情報源: 偶数行や奇数行などだけを指定できるCSS3セレクタ | ビジネスニュースで気になる記事を紹介。ラブリーラブリー […]

コメントを残す

プロフィール

嫁と4歳の息子の3人暮らしの30代後半のサラリーマンです。
詳しいプロフィール

カレンダー

2017年5月
« 4月    
1234567
891011121314
15161718192021
22232425262728
293031  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る