2018年9月24日 / 最終更新日時 : 2018年9月24日 HTML & CSS

番号指定の擬似クラス ①「 -of-type」

1 : nth-of-type(n)
2 : nth-of-type(odd) & : nth-of-type(even)
3 : first-of-type & : last-of-type
- 3.1 共有:

同じ要素を持った子要素のうち特定の箇所にのみにスタイルを適用したい場合、
対象の要素を持つタグを順番に数え、番号を指定した擬似クラスを使用する。

: nth-of-type(n)

　
子要素のうち、指定された要素を持つタグの中で先頭からn番目にスタイルを適用する。

– CSS –
h4タグで擬似クラス:nth-of-typeを用い、末尾のカッコ内に番号1を指定する。

h4:nth-of-type(1){
  color:red;
}

h4:nth-of-type(1){

color:red;

}

– HTML –

<div>
  <p>目的地を選んでください。</p>
  <h4>目的地</h4>
  <a href="">病院</a>
  <p>学校</p>
  <p>図書館</p>
  <h4>会社</h4>
</div>

<div>

<p>目的地を選んでください。</p>

</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 –

/*奇数のliタグ*/
.president li:nth-of-type(odd){ 
    color: blue;
}

/*偶数のliタグ*/
.president li:nth-of-type(even){
    color:red;
}

/*奇数のliタグ*/

.president li:nth-of-type(odd){

color: blue;

}

/*偶数のliタグ*/

.president li:nth-of-type(even){

color:red;

}

– HTML –

<div>
  <ul class="president">
    <li>ジョージ・ワシントン 無党派</li>
    <li>ジョン・アダムズ連邦党 </li>
    <li>トーマス・ジェファーソン 民主共和党</li>
    <li>ジェームズ・マディスン 民主共和党</li>
    <li>ジェームズ・モンロー 民主共和党</li>
    <li>ジョン・クィンシー・アダムズ 民主共和党</li>
    <li>アンドリュー・ジャクソン 民主党</li>
    <li>マーティン・ビューレン 民主党</li>
  </ul>
</div>

<div>

<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 –

p:first-of-type{
    color: red;
}

p:last-of-type{
    color:green;
}

p:first-of-type{

color: red;

}

p:last-of-type{

color:green;

}

– HTML –

<div>
  <p>目的地を選んでください。</p>
  <h4>目的地</h4>
  <a href="">病院</a>
  <p>学校</p>
  <p>図書館</p>
  <h4>会社</h4>
</div>

<div>

<p>目的地を選んでください。</p>

</div>

　
pタグのうち先頭と末尾のタグにcolorプロパティが適用される。
　

Follow me!