HTML・CSS Writing 2022

first-child pseudo-class --Introduction to CSS [CSS3 compatible]

The first-child pseudo-class is a pseudo-class for styling the first sibling to your parents. Often used in combination with the li tag.

<style>
  .my_list li: first-child {
    background: #ddd;
  }
</style>

<div class = "my_list">
  <ul>
    <li> First </li>
    <li> Next </li>
    <li> Last </li>
  </ul>
</div>

The style is applied only to the first li tag.