:first-child with nested elements

user_14794940 0
Viewed 124

I'd like to understand why li:first-child is targeting the first li (CHILD 1) and its children (GRANDCHILD 1.1, GRANDCHILD 1.2, GRANDCHILD 1.3) but about the others li children (CHILD 2 and CHILD 3) is targeting only its first child (GRANDCHILD 2.1 and GRANDCHILD 3.1)

HTML

<body>
    <ul>
      PARENT
      <li>CHILD 1
        <ul>
          <li>GRANDCHILD 1.1</li>
          <li>GRANDCHILD 1.2</li>
          <li>GRANDCHILD 1.3</li>
        </ul>
      </li>
      <li>CHILD 2
        <ul>
          <li>GRANDCHILD 2.1</li>
          <li>GRANDCHILD 2.2</li>
          <li>GRANDCHILD 2.3</li>
        </ul>
      </li>
      <li>CHILD 3
        <ul>
          <li>GRANDCHILD 3.1</li>
          <li>GRANDCHILD 3.2</li>
          <li>GRANDCHILD 3.3</li>
        </ul>
      </li>
    </ul>
  </body>

CSS

li:first-child {
  background: chartreuse;
}
css-selectors css
1 Answers

If you add border: 1px solid red; it will show you the answer.

li:first-child {
  background: chartreuse;
  border: 1px solid red;
}

Check it out here: https://codepen.io/riiiad/pen/dyppZdY

user_93059970
Related