CSSセレクタの擬似クラス 一定間隔の要素を指定することができる。
使用例は、テーブルの行単位で色を変えたい。
複数の場所にCSSで指定をしたい場合などに指定することが可能。
ｐ:nth-child()とｐ：nth-of-type()があり。
この設定を間違えると、思った設定が出来ない場合があり、
この２つの違いを理解しとく方がいいです。
ｐ:nth-child()とｐ：nth-of-type()
ｐ:nth-child()
p要素のすべての兄弟要素対象
ｐ：nth-of-type()
ｐ要素のみ対象があり。
この２つの違いを理解しておかないと、設定したのに
スタイルが適用されない！なんて事がおこります。
HTML
<div id="title" class="tg">
<h1>
タイトル1
</h1>
<p>
1番最初のpテキスト
</p>
<p>
2番目のpテキスト
</p>
<h1>
タイトル2
</h1>
<p>
最後のpテキスト
</p>
<h1>
タイトル3
</h1>
</div>
CSS
#title p:nth-child(1) {
color: #FF0004;
}
この場合は、<h1>タイトル1</h1>が１番目になるので
pタグじゃないのでcolor指定はされない。
nth-childを使って、１番目のpタグの色を変更したい場合は、
nth-child(2)と指定します。
CSS
#title p:nth-child(2) {
color: #FF0004;
}
ｐ：nth-of-type()で指定すると、pタグのみで
何番目かを検索するので、１番目のpタグを赤に
する場合は、ｐ：nth-of-type(1)と記入でOK。
HTML
<div id="title" class="tg">
<h1>
タイトル1
</h1>
<p>
1番最初のpテキスト
</p>
<p>
2番目のpテキスト
</p>
<h1>
タイトル2
</h1>
<p>
最後のpテキスト
</p>
<h1>
タイトル3
</h1>
</div>
CSS
#title p:nth-of-type(1) {
color: #ff0004;
}
こんな感じで、反映される範囲が異なるので、理解したうえで
使用するようにしていきましょう。
ｐ：nth-of-type()の指定方法
p:nth-child(odd) 奇数
p:nth-child(even) 偶数
p:nth-child(2) 2番目
p:nth-child(2ｎ+1) 1,3,5番目
nは０以上の整数を入れて指定する。
関連セレクタ
p:first-child １番最初の要素を選択
p:last-child １番最後の要素を選択
p:nth-last-child(2) 最後から2番目を選択
p:nth-child(n+2) 2番目から後ろを選択
（ｎには0以上の整数を挿入）
これらの指定方法でも可能になります。
CodePenはこちら
コメント