CSS3:n番目の要素に対してスタイルを適用する

goto_jp 258views 更新:2014年7月28日
.test p:nth-ov-type(3) {
    //スタイル
}

上記の記述で、クラス「test」内の3個目のpタグにスタイルを適用します。 0番目開始ではなく実数の1個目開始になります。

この:nth-of-typeによる番号指定はSassと相性が良かったりします。

Sass

@for $i from 1 through 10 {
    li:nth-of-type(#{$i}) {
        width: #{$i*10};
    }
}

出力されるCSS

li:nth-of-type(1) {
    width: 10px;
}
li:nth-of-type(2) {
    width: 20px;
}
li:nth-of-type(3) {
    width: 30px;
}
…

このようにSassのfor文に組み込むことで一気にCSSを生成することができます。

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

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

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