疑似クラス-child系-
nth-child
nth-childはセレクタに追加して条件を指定する擬似クラスのひとつで、指定した要素内のn番目(n)の子要素にスタイルを適用させることができます。
|
1 2 3 |
要素:nth-child(値){ プロパティ:値; } |
要素の部分には実際に変更させたい要素の親要素を設定します。
設定した親要素の中で何番目の子要素なのかを:nth-childの後の()の中の値の部分に設定します
値には数字、n+3などの式の他にeven(偶数)odd(奇数)の設定することができます。
例）
- 偶数にのみ適用する場合：even
- 奇数にのみ適用する場合：odd
- n番目に適用する場合：適用したい要素の親要素から見た順番の数値
- n番目以降すべてに適用する場合：n+適用を開始する項目の数値
使用例①
実際にコードを見てみます
今回用意したHTMLはこちら
|
1 2 3 4 5 6 7 8 9 |
<ul> <li>日曜日</li> <li>月曜日</li> <li>火曜日</li> <li>水曜日</li> <li>木曜日</li> <li>金曜日</li> <li>土曜日</li> </ul> |
このコードの中身をnth-childを使ってピンポイントに指定してみます
例えば金曜日は不燃ごみの日なので背景を水色にしたいと思います。
ul要素のなかの6つ目の子要素、<li>金曜日</li>の部分だけを変えるにはこのようなコードを書きます
|
1 2 3 |
ul :nth-child(6){ background-color: #bee1ff; } |
ul :nth-child(6)を使ってあげると良いでしょう（ulの後の半角スペースがないと効かない）
セレクタを日本語に翻訳するとul要素の中の6番目の子要素として訳すことができると思います。
よくある書き方として下記のような記述方法もあります。
|
1 2 3 |
ul li:nth-child(6){ background-color: #bee1ff; } |
この書き方は「ul要素の中の6番目にあるli要素」がセレクタとして指定されます。 色々な技術系サイトではこの書き方がよく紹介されています。
使用例②
少し上で紹介したものは対象となる要素が同じだったので若干複雑なコードを使って指定をしてみます。 今回使うHTMLのコードはこちら
|
1 2 3 4 5 6 7 8 |
<div id="sample"> <h2>nth-child(n)</h2> <p>nth-child(n)は疑似クラスの一つでn番目の子要素がセレクタとなります</p> <p>似たような疑似クラスnth-of-type(n)とは別物なので使い分けができるようになりましょう！</p> <h2>nth-of-type(n)</h2> <p>nth-of-type(n)は疑似クラスの一つでn番目にある要素がセレクタとなります</p> <p>似ているようで全然違う</p> </div> |
今回はこのコードを使って指定してみます。
例えば2つ目にあるh2要素に対してピンポイントに指定するのであれば下記のように指定します
今回も背景色を変えてみます
|
1 2 3 |
#sample :nth-child(4){ background-color: #f9d9ff; } |
このように指定をすると#sampleの4番目の子要素がセレクタとなります。
考え方は上の方でやったul要素と同じになります。
なので2つ目にあるh2要素の背景色が変化してくれます。
※#sampleの後に半角スペースがないと何も起こりません
複雑なHTMLと組み合わせる場合よくやりがちなミスがあります 上の状況と同じで#sampleの中の2つ目のh2要素指定したいのでこのようなスタイル指定をしたとしましょう
|
1 2 3 |
#sample h2:nth-child(2){ background-color: #f9d9ff; } |
実際に表示してみると何も起こりません。
この指定方法だと、#sampleの中の2番目の子要素のh2要素がセレクタの対象となります。
#sampleの中の二番目の子要素はp要素なので対象となる要素がありません。
なので当たり前ですが、何も起こりません。
あくまでも()内の数字は親要素の中で、何番目の子要素かを指定するもので、
何個目の要素かを指定するものではありません。
h2まで特定しつつ指定するのであれば、
下記のように指定する必要があります
|
1 2 3 |
#sample h2:nth-child(4){ background-color: #f9d9ff; } |
(4)にすることで#sampleの中の4番目ある子要素のh2要素がセレクタの対象になります。
子孫セレクタと組み合わせてもあくまで基準は親要素になるので注意が必要
:first-childと:last-child
この二つの疑似クラスを使うと
:first-child：最初の子要素
:last-child：最後の子要素
に対して限定してスタイルの設定をすることができます。 変化させる場所が限定的になっているので使いにくそうに思えるかもしれませんが、使う機会があると思いますので合わせて覚えておきましょう。
