HTML Element Style How to - Style Individual Menu Items with child selector

Question

We would like to know how to style Individual Menu Items with child selector.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#first {<!--   ww w. j a v a2  s.  co m-->
  color: red;
}

#first ul>* {
  background-color: red;
  color: white;
}

#second {
  color: blue;
}

#second ul>* {
  background-color: blue;
  color: white;
}

#third {
  color: green;
}

#third ul>* {
  background-color: green;
  color: white;
}
</style>
</head>
<body>
  <ul class="menu">
    <li id="first">This is Red
      <ul>
        <li>Background Red</li>
      </ul>
    </li>
    <li id="second">This is Blue
      <ul>
        <li>Background Blue</li>
      </ul>
    </li>
    <li id="third">This is Green
      <ul>
        <li>Background Green</li>
      </ul>
    </li>
  </ul>
</body>
</html>

The code above is rendered as follows: