タグ

ブックマーク / fridayeight.jp (1)

  • CSSで子要素n番目の項目や偶数、奇数項目のみ指定したい時に使うセレクタ - Fridayeight

    疑似クラスの:nth-childを使えば特定項目のみの指定を行う事ができます。tableで使用すれば、1行毎に背景色を変えてすっきり見やすくする事もできますね。 セレクタを使い奇数行と偶数行で色分けしたサンプルです。 サンプルのhtml table部分(抜粋) このサンプルでは一番上の見出し部分をthead要素、チーム成績部分をtbody要素に分けてhtmlを書いています。 <table> <thead> <tr> <th>見出し部分</th> </tr> </thead> <tbody> <tr> <td>チーム成績</td> </tr> </tbody> </table> スタイルシート tbody内のtr要素の背景を色分けしたいので、tbody tr:nth-child() と記述します。偶数行を指定するなら even を、奇数行では odd となります。 tbody tr:nth

    CSSで子要素n番目の項目や偶数、奇数項目のみ指定したい時に使うセレクタ - Fridayeight
    kiyo_hiko
    kiyo_hiko 2015/07/02
    nth-child擬似属性、even/odd/an+b(aごとにb番目の子)
  • 1