Descendant selectors more specific than child selectors?

Asked Nov 18 '19 at 15:43

Active Nov 18 '19 at 15:52

Viewed 25 times

So I'm learning CSS right now. I'm tinkering with selectors at the moment and this has me kind of stumped. When I run this code. The child of the li all stay green.

ul  li{
    color: green;
}
li > ol{
    color: red;
}

all green

But if I run this code, it works the way I intended the first one to work. I understand why the second code works. I'm just wondering why they both don't do the same thing.I believe ol is the child of the li, so why doesn't it change colors?

ul > li{
    color: green;
}
li  ol{
    color: red;

  }

red and green

HTML code:

<ul>
    <li>Peter<ol>
        <li>Juan</li>
        <li>Samuel</li>
    </ol></li>
    <li>John<ol>
            <li>Juan</li>
            <li>Samuel</li>
        </ol></li>
    <li>Sara<ol>
            <li>Juan</li>
            <li>Samuel</li>
        </ol></li>
</ul>

edited Nov 18 '19 at 15:52

asked Nov 18 '19 at 15:43

Lazaro

1

consider peasting the html – Carlos López Marí Nov 18 '19 at 15:47
This may help: https://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors – Jeremy Harris Nov 18 '19 at 15:47
2

`ul li` is selecting all the `li` including the ones inside `ol` while `ul > li` not – Temani Afif Nov 18 '19 at 15:48
and `li ol{ color: red;}` - doesn't select the `li` at all except by inheritance which is superceded by the original rule`. – Paulie_D Nov 18 '19 at 15:50

Descendant selectors more specific than child selectors?

0 Answers0