QP School

Full Version: Child selectors in CSS3
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Example:

<!DOCTYPE html>
<html>
<head>
  <title>Child Selectors Example</title>
  <style>
    /* Select only the direct children of the unordered list (ul) */
    ul > li {
      color: blue;
    }
  </style>
</head>
<body>
  <ul>
    <li>This is a direct child of ul and will be blue.</li>
    <li>
      This is a nested list within li.
      <ul>
        <li>This is a child of the nested ul and will not be blue.</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Explanation:

Child selectors (>) target only the direct children of a parent element. In this example, the ul > li selector selects all li elements that are direct children of the unordered list (ul) and applies a blue color to their text. The nested li inside the second li will not be affected.