CodePen Embed - first-child、last-child、first-of-type、last-of-typeの表示結果

<p>first-child last-child</p>
<ul class="sample1">
  <p>pタグ</p>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <p>pタグ</p>
</ul>

<p>first-of-type last-of-type</p>
<ul class="sample2">
  <p>pタグ</p>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <p>pタグ</p>
</ul>

/* first-child last-childの設定 */
.sample1 li:first-child{
  color:#f00;
}
.sample1 li:last-child{
  color:#00f;
}

/* first-of-type last-of-typeの設定 */
.sample2 li:first-of-type{
  color:#f00;
}
.sample2 li:last-of-type{
  color:#00f;
}

This Pen is owned by WEBエンジニア Wiki on CodePen.

See more by @WEB-Wiki on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.