css 〇番目のクラスに何かしたい（疑似要素: first-of-type, first-child, last-of-type, last-child、nth-of-type()）

基本

サンプル

<div id="hoge">
  <p>123</p>
  <div class="foo">abc</div>
  <div class="foo">def</div>
  <div class="foo">ghi</div>
  <p>456</p>
</div>

「<p>123</p>」を指定したいときの例たち

.hoge p:first-child { ～ 省略 ～ }
/*
.hoge p:first-of-type { ～ 省略 ～ }
.hoge p:nth-of-type(1) { ～ 省略 ～ }
*/

「<p>456</p>」を指定したいときの例たち

.hoge p:last-child { ～ 省略 ～ }
/*
.hoge p:last-of-type { ～ 省略 ～ }
.hoge p:nth-of-type(2) { ～ 省略 ～ }
*/

「<div class="foo">abc</div>」を指定したいときの例たち

.hoge div:first-of-type { ～ 省略 ～ }
/*
.hoge .foo:nth-of-type(1) { ～ 省略 ～ }
.hoge div:nth-of-type(1) { ～ 省略 ～ }
*/

「<div class="foo">def</div>」を指定したいときの例たち

.hoge .foo:nth-of-type(2) { ～ 省略 ～ }
/*
.hoge div:nth-of-type(2) { ～ 省略 ～ }
*/

「<div class="foo">ghi</div>」を指定したいときの例たち

.hoge div:last-of-type { ～ 省略 ～ }
/*
.hoge .foo:nth-of-type(3) { ～ 省略 ～ }
.hoge div:nth-of-type(3) { ～ 省略 ～ }
*/

関連項目

• css 最初の要素、最後の要素だけ（疑似要素: first-of-type, first-child, last-of-type, last-child）