こんにちは、@codeship_techです。
今回は、CSSのセレクタについてです。
色々な種類があるCSSセレクタですが、一見似ているものにどのような違いがあるのかを解説していたようです！
:nth-child()と :nth-of-type()の違いはなんですか？
例えば、pタグに対してこのセレクタを適応した場合を想定します。
p:nth-child(n)は pタグが入っている階層の兄弟要素の中で、n番目の要素がpタグである場合に選択します。
対して、 p:nth-of-type(n)は pタグが入っている階層の兄弟要素の中で、n番目のpタグを選択します。
少し例を出します。
以下のようなHTMLがあったとします。
html
<article>
<h1>全体の1番目</h1>
<p>全体の2番目、pの中で1番目</p>
<h2>全体の3番目</h2>
<p>全体の4番目、pの中で2番目</p>
<p>全体の5番目、pの中で3番目</p>
<p>全体の6番目、pの中で4番目</p>
</article>
この時、 article p:nth-child(4){color: red;}で文字の色が赤くなるのは、全体の4番目と書かれた要素です。
また、 article p:nth-of-type(4){color: blue;}で文字の色が青くなるのは、pの中で4番目と書かれた要素です。
授業日記についてのご意見
CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。
