Jak ustawić kierowanie na pierwsze dziecko, które nie ma określonej klasy?

Question

Jeśli mam następujące 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> 

Jak kierować się pierwszego dziecka, które nie ma hide klasę? np.

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

Ale to nie działa.

Fiddle

Answer 1

Można użyć CSS adjacent sibling selector aby wybrać pierwszą li element, który nie ma klasę .hide:

EXAMPLE HERE.

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

również pod uwagę sprawdzając pierwszy element listy (pierwsze dziecko) dla istnienia .hide nazwą klasy.

Answer 2

użyciu javascript można zrobić to

http://jsfiddle.net/h_awk/5G5ED/4/

<script> 
var parent = document.getElementById('some_list'), 
    child = parent.getElementsByTagName('li'); 

child[2].style.color = 'blue'; 
</script> 

Answer 3

myślę, że to, co chcesz

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

    color: #CCC; 

}