How do I target the first child that does not have a particular class?

Question

If I have the following html

<ul id="some_list">
    <li class="hide">Do Not Target This</li>
    <li class="hide">Do Not Target This</li>
    <li>Target This</li>
    <li>Do Not Target This</li>
</ul>

How do I target the first child that does not have the hide class? eg

#some_list>li:not(.hide):first-child {
    color: #777;
}

But this doesn't work.

Fiddle

Answer 1

You could use CSS adjacent sibling selector in order to select the first li element which doesn't have the .hide class:

EXAMPLE HERE.

li:first-child:not(.hide),
li.hide + li:not(.hide) {
    background-color: gold;
}

Also consider checking the first list item (the first child) for existence of .hide class name.

Answer 2

I think this is what you want

#some_list>li.hide + li:not(.hide){

    color: #CCC;

}