nth-of-typeと子セレクタを組み合わせる(CSS3)

Elements:nth-of-type(n)

は要素のn番目に対してCSSを定義できる。例えば以下のように使うと簡単に左右交互にdivを表示させることができる。

div.test{
  float:left;
}
div.test:nth-of-type(2n+1){
  float:right;
}

また、”○列ずつ表示させて折り返しさせる”などの使い方でclearfixを効率的に指定できるので非常に便利。しかし、子要素にこのような指定を行いたい場合注意が必要になる。先日このことで数時間悩まされたためメモ。

<div class="boxA">
  <div class="boxB">テキスト</div>
  <ul>
        <li>テキスト</li>
        <li>テキスト</li>
        <li>テキスト</li>
  </ul>
</div>

<div class="boxA">
  <div class="boxB">テキスト</div>
  <ul>
        <li>テキスト</li>
        <li>テキスト</li>
        <li>テキスト</li>
  </ul>
</div>

・・・繰り返し・・・

このような場合で偶数番目のboxAの中のboxBを指定する場合、次のようになる。

div.boxA:nth-of-type(2n+1) > div{
  XXX:XXXX;
}

boxB:nth-of-type(2n+1)・・・では効かないので注意。親要素の順番を指定してその直下の子要素を指定するかたちになる。