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

Tag:

擬似クラス(特定の状況に対して適用されるセレクタ)の『E:nth-of-type』と『E:nth-child』の違いを確認するためのサンプルです。

nth-of-typeとnth-child
nth-of-type nth-child
html
                    <dl>
                        <dt>①## 1 ##</dt>
                        <dd>②あいうえお</dd>
                        <dt>③## 2 ##</dt>
                        <dd>④かきくけこ</dd>
                        <dd>⑤さしすせそ</dd>
                        <dt>⑥## 3 ##</dt>
                        <dd>⑦たちつてと</dd>
                        <dt>⑧## 4 ##</dt>
                        <dd>⑨なにぬねの</dd>
                    </dl>
                    
css
                    dt:first-of-type{
                    color: red;
                    }
                    dt:nth-of-type(3){
                    color: blue;
                    }
                    dt:last-of-type{
                    color: green;
                    }
                    
                    dt:first-child{
                    color: red;
                    }
                    dt:nth-child(3){
                    color: blue;
                    }
                    dt:last-child{
                    color: green;
                    }
                    
表示
①## 1 ##
②あいうえお
③## 2 ##
④かきくけこ
⑤さしすせそ
⑥## 3 ##
⑦たちつてと
⑧## 4 ##
⑨なにぬねの
①## 1 ##
②あいうえお
③## 2 ##
④かきくけこ
⑤さしすせそ
⑥## 3 ##
⑦たちつてと
⑧## 4 ##
⑨なにぬねの
解説 ・兄弟関係にある同じ『dt要素』の中の3番目の要素の文字色が青になっています。

・「nth-of-type(1)」と「first-of-type」は同じ意味です。

・兄弟関係にある同じ要素の中の3番目の要素が『dt要素』であるため文字色が青になっています。

・「nth-child(1)」と「first-child」は同じ意味です。

・兄弟関係にある同じ要素の中の最後の要素は『dt要素』ではなく、『dd要素』であるため緑色の文字に変更されていません。

スポンサーリンク