番号指定の擬似クラス ①「 -of-type」
目次
同じ要素を持った子要素のうち特定の箇所にのみにスタイルを適用したい場合、
対象の要素を持つタグを順番に数え、番号を指定した擬似クラスを使用する。
対象の要素を持つタグを順番に数え、番号を指定した擬似クラスを使用する。
: nth-of-type(n)
子要素のうち、指定された要素を持つタグの中で先頭からn番目にスタイルを適用する。
– CSS –
h4タグで擬似クラス:nth-of-typeを用い、末尾のカッコ内に番号1を指定する。
1 2 3 |
h4:nth-of-type(1){ color:red; } |
– HTML –
1 2 3 4 5 6 7 8 |
<div> <p>目的地を選んでください。</p> <h4>目的地</h4> <a href="">病院</a> <p>学校</p> <p>図書館</p> <h4>会社</h4> </div> |
子要素の内 ※先頭から1番目のh4タグにのみスタイル、colorプロパティが適用される。
※ :nth-last-of-type(n)とすることで先頭からでなく末尾からn番目と数えるようになる。
: nth-of-type(odd) & : nth-of-type(even)
子要素のうち、
- : nth-of-type(odd)
- 指定された要素を持つタグの中で奇数番号の要素にスタイルを適用する。
- : nth-of-type(even)
- 指定された要素を持つタグの中で偶数番号の要素にスタイルを適用する。
– CSS –
1 2 3 4 5 6 7 8 9 |
/*奇数のliタグ*/ .president li:nth-of-type(odd){ color: blue; } /*偶数のliタグ*/ .president li:nth-of-type(even){ color:red; } |
– HTML –
1 2 3 4 5 6 7 8 9 10 11 12 |
<div> <ul class="president"> <li>ジョージ・ワシントン 無党派</li> <li>ジョン・アダムズ連邦党 </li> <li>トーマス・ジェファーソン 民主共和党</li> <li>ジェームズ・マディスン 民主共和党</li> <li>ジェームズ・モンロー 民主共和党</li> <li>ジョン・クィンシー・アダムズ 民主共和党</li> <li>アンドリュー・ジャクソン 民主党</li> <li>マーティン・ビューレン 民主党</li> </ul> </div> |
奇数と偶数でliタグ内の文字に指定する色を分ける事が出来た。
: first-of-type & : last-of-type
子要素のうち、
指定された要素を持つタグの中で奇数番号の要素にスタイルを適用する。
- : first-of-type
- 指定された要素を持つタグの中で先頭のタグにスタイルを適用する。
(※:nth-of-type(1)と結果として同じ意味になる) - : last-of-type
- 指定された要素を持つタグの中で末尾のタグにスタイルを適用する。
– CSS –
1 2 3 4 5 6 7 |
p:first-of-type{ color: red; } p:last-of-type{ color:green; } |
– HTML –
1 2 3 4 5 6 7 8 |
<div> <p>目的地を選んでください。</p> <h4>目的地</h4> <a href="">病院</a> <p>学校</p> <p>図書館</p> <h4>会社</h4> </div> |
pタグのうち先頭と末尾のタグにcolorプロパティが適用される。
“番号指定の擬似クラス ①「 -of-type」” に対して1件のコメントがあります。
コメントは受け付けていません。