HTML・CSS Writing 2022

Descendant Selector-Introduction to CSS [CSS3 compatible]

Descendant selector is a descendant relationship ID selector, class selector and element selector.

In the following example, ".food ul" is specified to specify "ul" which is a descendant of ".food". The specification ".food li" specifies "li" which is a descendant of ".food".

<style>
  .food ul {
    border: 1px solid #ddd;
  }
  .food 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>

Descendant selectors are often used to specify elements. Combining the class name with the tag name simplifies the description.