HTML・CSS Writing 2022

Child Selector-Introduction to CSS [CSS3 compatible]

Child selector is a parent-child relationship ID selector, class selector and element selector.

In the following example, ".food> ul" specifies "ul" which is a direct child of ".food". The specification ".food> ul> li" specifies "li" which is a direct child of "ul" which is a direct child of ".food".

Note that unlike Descendant Selector, only direct children are targeted.

<style>
  .food> ul {
    border: 1px solid #ddd;
  }
  .food> ul> li {
    color: red;
    list-style: none;
    padding-left: 5px;
  }
</style>

<div class = "food">
  <ul>
    <li> Yakiniku </li>
    <li> Salad </li>
    <li> Udon </li>
  </ul>
</div>