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".

  • Yakiniku
  • Salad
  • Udon
  .food ul {
    border: 1px solid #ddd;
  .food li {
    color: red;
    list-style: none;
    padding-left: 5px;

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

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

Associated Information