CSS3:n番目の要素を指定するセレクタ

goto_jp 93views 更新:2015年1月14日
p:nth-of-type(2) {
  color: #f00;
}

「:nth-of-type()」を利用します。

上記の指定に対して下記HTMLのような状態になります。

<p>対象外</p>
<p>セレクタ対象なので赤くなる。</p>
<p>対象外</p>
<p>対象外</p>

数値を直接指定するほか下記のような指定も可能です。

:nth-child(odd)   奇数番目を対象
:nth-child(even)  偶数番目を対象
:nth-child(3n)    3の倍数を対象
:nth-child(3n+1)  3の倍数+1を対象(1,4,7,10...)

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません