「クラス名:nth-of-type(n)」で記載した場合、「クラスでn番目」ではなく、「要素でn番目」という数え方になる

「クラス名:nth-of-type(n)」で記載したときの挙動が気になったのでメモ。
以下の簡単なコードで動作を確認します。

簡単な動作確認用コード

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>            
            <span class="a">その要素で1番目⇛aクラス</span>
            <span class="b">その要素で2番目⇛bクラス</span>
            <!-- クラスに適用されていたならこの要素は青色になる（class="a"の中で２番目のため）-->
            <span class="a">その要素で3番目⇛aクラス</span>
            <span class="b">その要素で4番目⇛bクラス</span>
            <!-- クラスに適用されていたならこの要素は青色になる（class="a"の中で３番目のため）-->
            <span class="a">その要素で5番目⇛aクラス</span>
            <span class="b">その要素で6番目⇛bクラス</span>
        </div>
    </body>
</html>

CSS

.a:nth-of-type(1){
    background-color: red;
}
.a:nth-of-type(2){
    background-color: blue;
}
.a:nth-of-type(3){
    background-color: yellow;
}
.a:nth-of-type(4){
    background-color: green;
}

※nth-of-type(n)は、疑似クラスの一種で、 n番目のその種類の要素にスタイルを適用

実施結果

f:id:narunaru7638:20190422004455p:plain

まとめ

・「クラス名:nth-of-type(n)」で記載した場合、「クラスでn番目」ではなく、「要素でn番目」という数え方になる
・要素でn番目かつそのクラス名をもつものにスタイルが適用される
・「クラス名:nth-of-type(n)」で記載したときは、勘違いしやすいので注意（特に兄弟要素に同じ種類の要素があると間違えやすい）