CODEWITHSUNDEEP
htmlcss
Matt
Matt

Reputation: 31

:first-of-type doesn't work the way it should

I'm having trouble understanding why :first-of-type class works for all types, not just the first one. Here's my example code

**<style>
    .garden ol:first-of-type li {
        color: green;
    }
</style>**


<ul class="garden">
    <div>Garden</div>
    <li>Fruit:
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ol>
    </li>
    <li>Vegies:
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ol>
    </li>
</ul>

The result is that both OLs are colored in green. If I try using :nth-of-type(1) - nothing is colored If I try using :nth-of-type(2) - both OLs are colored again

What I am doing wrong?

Upvotes: 0

Views: 60

Answers (1)

Quentin
Quentin

Reputation: 943209

Both ol elements are the first of their type (ol) inside their respective parent elements (two different li elements).

If you are trying to target the ol inside the first li inside the ul then you can use that li since it is the first of its type.

.gardern > li:first-of-type li

Note that div elements are not allowed to be children of ul elements.

Upvotes: 2

Related Questions