CSSスキル - 第8章 Lesson3

順番を指定してスタイルをかけるnth-childの使い方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

順番を指定してスタイルをかけるnth-childの使い方について、初心者向けに解説しています。
ここでは、複数の<p>タグに対して、n番目のpタグにだけ文字の色を変えるCSSを適応させています。



この動画で学べること

・擬似クラスnth-child(n)を使う方法



擬似クラスnth-child(n)を使う方法

今回は、擬似クラスnth-child(n)について学んでいきましょう。
nth-child(n)とは、親のn番目の子要素を指定してCSSをかけることができるものです。
たとえば、<li>タグの2番めにスタイルをかけたい場合、このように書きます。




では実際に、擬似クラスnth-child(n)を使う方法を見ていきましょう。
<div>タグの2つ目の<p>タグにだけ文字の色を赤にするという指定をしてみます。



div p:nth-child(2) {
color: red;
}



保存してブラウザで見てみましょう。
2つ目の<p>タグにだけ文字の色が赤になりました。
また、同じように<div>タグの5つ目の<p>タグにだけ文字の色を緑にするという指定をしてみます。



div p:nth-child(5) {
color: orange;
}



保存してブラウザで見てみましょう。
今度は上手くいきません。
これは、親要素の<div>タグの中で5つ目の子要素を指定しているからです。
今回の5つ目の子要素は<h2>タグでした。
つまり、「5つめのpタグ」という部分にスタイルをかけたければ、6つ目の要素という指定をしてあげなければならないということです。
少しむずかしいですが、マスターするととても便利ですので、皆さん頑張って覚えてください。