疑似クラスnth-of-type
nth-of-typeとは、該当するものに対してスタイルを適用するというプロパティ。
nth-childとかなり似ていますがあちらは何番目の子要素化を示すのに対して
nth-of-typeは指定した要素の中にある何番目の要素なのかを設定していきます。
状況によって違う動きになってしますので注意して使ってください
|
1 2 3 |
要素:nth-of-type(値){ プロパティ:値; } |
要素の部分には実際に変更させたい要素の親要素を設定します。
親要素から見て何番目の要素なのかを:nth-of-typeの後の()の中の値の部分に設定します
値には数字、n+3などの式の他にeven(偶数)odd(奇数)の設定することができます。
例）
- 偶数にのみ適用する場合：even
- 奇数にのみ適用する場合：odd
- n番目に適用する場合：適用したい要素の親要素から見た順番の数値
- n番目以降すべてに適用する場合：n+適用を開始する項目の数値
この辺はnth-childとほとんど同じ
だけど動きが変わるからややこしい
使用例①
実際にコードを見てみます
今回用意したHTMLはこちら
nth-childの時と同じです
|
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-of-typeを使ってピンポイントに指定してみます
例えば水曜日と土曜日は燃えるごみの日なので背景を赤っぽくにしたいと思います。
ul要素のなかの4つ目の要素と7つ目の要素、 <li>水曜日</li>と<li>土曜日</li>の部分を変えるにはこのようなコードを書きます
|
1 2 3 4 |
ul :nth-of-type(4), ul :nth-of-type(7){ background-color: #f9d9ff; } |
ul :nth-of-type(4),ul :nth-of-type(7)のような形で複数セレクタとしてを使ってあげると良いでしょう（ulの後の半角スペースがないと効かない）
セレクタを日本語に翻訳するとul要素の中の４番目の要素と7番目の要素と訳すことができると思います。
よくある書き方として下記のような記述方法もあります。
|
1 2 3 4 |
ul li:nth-of-type(4), ul li:nth-of-type(7){ background-color: #f9d9ff; } |
この書き方は「ul要素の中の4番目にあるli要素と7番目にある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要素に対してピンポイントに指定したいのでnth-childと同じように下記のように指定してみます
今回も背景色を変えてみます
|
1 2 3 |
#sample :nth-of-type(4){ background-color: #f9d9ff; } |
こうすれは#sampleの中の4つ目の要素がセレクタの対象となり、
h2要素の背景色が変化すると思いきやなぜかおかしな場所のp要素の背景色が変化します
※#sampleの後に半角スペースがないと何も起こりません
このように指定をすると#sample内にある要素の4つ目の要素がセレクタとなります。
なので#sampleの中の4つ目のp要素がセレクタの対象になります
複雑HTMLと組み合わせる場合よくやりがちなミスになります
では、2つ目のh2要素なのでこのように指定してみます
|
1 2 3 |
#sample :nth-of-type(2){ background-color: #f9d9ff; } |
この指定方法だと、#sampleの中のすべての要素を対象に2つ目の要素のがセレクタの対象となります。
なのでこのような表示結果になります
h2まで特定しつつ指定するのであれば、
下記のように指定する必要があります
|
1 2 3 |
#sample h2:nth-child(4){ background-color: #f9d9ff; } |
(4)にすることで#sampleの中の4番目ある子要素のh2要素がセレクタの対象になります。
子孫セレクタと組み合わせてもあくまで基準は親要素になるので注意が必要
