CSS3の擬似クラス [ :nth-child ] と [ :nth-of-type ] の違いと参考の記事まとめ

  • ブックマーク
  • -
    コピー
「○○個めのliには別のスタイルをあてたい」や「奇数の要素の背景色を変えたい」といった時は擬似クラスの:nth-child や :nth-of-type を使って解決します。

:nth-child と :nth-of-type の違い

:nth-child と :nth-of-type の違いは要素 (セレクター) が同じかどうかです。:nth-child の場合はdivやpのように違う要素でも数に数えますが、 :nth-of-type の場合は div や p などの要素と一緒にし異なった要素は数えません。 後述のようなHTMLがあった場合、 .p-01 にスタイルを指定したい時の記述の違いをみていきましょう。

<div class="sample">
    <div>
        div-01
    </div>
    <div>
        div-02
    </div>
    <p>
        p-01
    </p>
    <p>
        p-02
    </p>
    <div>
        div-03
    </div>
    <p>
        p-03
    </p>
    <div>
        div-04
    </div>
</div>


.sample :nth-child(3) {
    background-color: red;
}
.sample p:nth-of-type(1) {
    background-color: red;
}

このように:nth-child , :nth-of-child ではそれぞれの記述のルールがあり、同じ要素にスタイルをあてたくても違った書き方となります。 また.sampleの中の1つ目のp要素にスタイルをあてるために p:first-childと指定しても、.sampleの中にある1つ目の小要素はpではなくdivなためこの記述も無視されます。

参考の記事

oddやevenを利用して奇数偶数の指定や、3n(3の倍数)、-n+5(最初から五番目まで)、n+6 (六番目以降)などといった指定も可能です。 詳しくは疑似クラス :nth-child t :nth-of-child が詳しく書いてある記事を見てみましょう。
  • ブックマーク
  • -
    コピー

この記事を書いた人

Susumu Seino

1988年 東京都足立区生まれ。瀬戸内海の小島と東京に拠点を持ち、2020年からは夫婦でアドレスホッピングを計画しているデジタルノマドな日本人。デジタルパブリッシング代理店のアニューマの創業者です。