CODEWITHSUNDEEP
htmlcsscss-selectors
red888
red888

Reputation: 31662

CSS: Confused about behavior of the > selector

I thought the > selector only selects direct children of an element (excluding inherited properties) but the following example has me confused:

<ul>
    <li>Item 1</li>

    <li>Item 2
        <ol>Subitem 2
            <li>Subitem 2A</li>
            <li>Subitem 2B</li>
        </ol>
    </li>

    <li>Item 3
        <li>Subitem 3a
            <li>Subitem 3aa
                <ol>Subitem 3aaa
                    <li>Subitem 3aaaa
                    </li>
                </ol>
            </li>
        </li>
    </li>

    <ol>Item 4</ol>
</ul>

ul>li {
    color: green;
    font-style:italic;
    font-size:20px;
    border:5px solid red;
}

So I try this out and this is what I see on Chrome "Version 30.0.1599.101 m": enter image description here

I tried to work out how the rules were being applied but I don't understand it completely:

Item 1,2,3: Get all the styles because they are direct children of the ul and are li

Item 4: Doesn’t get any styles because it is not an li

Subitem 2-2B: Get the inherited color and font styles, but don’t get the border styles. Is this because they are not direct children or because they are not li?

Subitem 3a and 3aa: Get all the styles- why? They are not direct child of the ul. Its looks like the > selector hits all child items of the same type until they are interrupted by an item of a different type- is this correct?

Subitem 3aaa and 3aaaa: Don’t get border style, but still get inherited color and font styles. Is this because they are children of an li which does have those styles? Why is this?

Just trying to wrap my head around this behavior.

Upvotes: 0

Views: 153

Answers (5)

Naj
Naj

Reputation: 227

Pity the submitted html was badly formed because this only makes things more confusing. However, even if well formed, all the nested lis will still be color green but they won't have borders.

Why?

Because of inheritance - color, font-size and font-style are all inherited properties - border isn't.

This shows the limitation of the direct child selector - you can't use it with properties that inherit.

Upvotes: 0

recursive
recursive

Reputation: 86144

<li> has optional close tags, so if the browser sees another <li> before a correpsonding </li>, it implicitly inserts a close for the previous tag. You can verify this using the DOM inspector in your browser's developer tools. This means that Item 3's "subitems" are actually siblings to Item 3.

DOM view

Upvotes: 1

Muhammad Umer
Muhammad Umer

Reputation: 18147

the > means any element that is direct child of previous element(s).

so....

ul li means that any li that is inside ul should be selected.

ul>li means any li that is direct children, like <ul> <li>... & not like <ul> <li> <p> <li> this last li wont get the styles...

it was confusing at first but became clear very quickly.

but in your case since you are not putting ul or ol before starting another li. browser adds one. And that makes the indirect li a child of ul and thus it gets selected too.

Upvotes: 1

Bill Criswell
Bill Criswell

Reputation: 32941

You can't nest <li> within <li> without starting another <ul>. The browser is closing the <li> for you automatically.

Upvotes: 3

CRABOLO
CRABOLO

Reputation: 8793

It's because you have an open li tag. Say if you were to close the Item 3 with a </li> right after Item 3 , instead of leaving it open. Then the ol's would not turn green. But b.c they are open, the ol is part of a li.

<li>Item 3
        <li>Subitem 3a
            <li>Subitem 3aa
                <ol>Subitem 3aaa
                    <li>Subitem 3aaaa
                    </li>
                </ol>
            </li>

Upvotes: 0

Related Questions