How to select only parent elements?

Question

I want to select only parent elements but it's not work corrrectly(or I don't do properly.) How to select only parent elements?

body > ul > li {
  color: green;
}

<body>
  <ul>
    <li>parent</li>
    <li>parent
      <ul>
        <li>child</li>
        <li>child</li>
      </ul>
    </li>
    <li>parent</li>
    <li>parent</li>
  </ul>
</body>

@SuperDJ how it's a duplicate? because it contains the word *parent*? — Temani Afif, Aug 28 '18 at 08:23
@TemaniAfif letting them know there is no parent selector in CSS — SuperDJ, Aug 28 '18 at 08:25
@SuperDJ but the question has nothing to do with *parent selector* — Temani Afif, Aug 28 '18 at 08:26

Temani Afif · Accepted Answer · 2018-08-28T08:49:41.680

You are facing the inheritance behavior. You are setting the color to only the parent but child are inheriting this color too.

You need to reset the style for child:

body > ul > li {
  color: green;
}
body > ul > li > ul {
  color:initial;
}

<body>
  <ul>
    <li>parent</li>
    <li>parent
      <ul>
        <li>child</li>
        <li>child</li>
      </ul>
    </li>
    <li>parent</li>
    <li>parent</li>
  </ul>
</body>

score 1 · Answer 2 · answered Aug 28 '18 at 08:22

1

Your inner <ul> takes css from parent. You need to overwrite this

body > ul > li {
  color: green;
}

body > ul > li ul {
    color: black;
}

<body>
  <ul>
    <li>parent</li>
    <li>parent
      <ul>
        <li>child</li>
        <li>child</li>
      </ul>
    </li>
    <li>parent</li>
    <li>parent</li>
  </ul>
</body>

answered Aug 28 '18 at 08:22

Justinas

41,402
5
66
96

What makes 'black' appropriate? – Peter B Aug 28 '18 at 08:30
1

@PeterB Death Metal. It's just illustration of color reset. I don't know what OP is using by default. – Justinas Aug 28 '18 at 08:31

score 1 · Answer 3 · answered Aug 28 '18 at 12:45

body > ul > li {
  color: green;
}

body > ul > li > ul {
    color: initial;
}

<body>
  <ul>
    <li>parent</li>
    <li>parent
      <ul>
        <li>child</li>
        <li>child</li>
      </ul>
    </li>
    <li>parent</li>
    <li>parent</li>
  </ul>
</body>

score -2 · Answer 4 · answered Aug 28 '18 at 08:21

-2

Try

body  ul  li { color: green; }

answered Aug 28 '18 at 08:21

Chuka Okoye

132
3

Why use body everything is in the body anyway? – SuperDJ Aug 28 '18 at 08:22
Wrong, and if you tried it you would have seen that it makes no difference. – Peter B Aug 28 '18 at 08:27
It should work! Problem with you code is the way you query the selector – Chuka Okoye Aug 28 '18 at 08:33

How to select only parent elements?

4 Answers4