CSS, aby wybrać najbliższego potomka?

Question

Używając CSS, czy istnieje sposób na wybranie najbliższego potomka elementu, który pasuje do wybranego selektora?

<div class="foo"> <!-- if we're inside this --> 
    <div> 
    <br /> 
    <div class="bar"> <!-- match this --> 
     <div class="bar"> <!-- but not this --> 
     <div class="bar"> <!-- or this --> 
     </div> 
     </div> 
    </div> 
    <div class="bar"> <!-- I don't really care whether we match this --> 
    </div> 
    </div> 
</div> 

To jest coś, co wybrać pierwszą .bar w dowolnym .foo (bez względu na to ile dziecko lub rodzeństwo elementy są pomiędzy), ale nie drugi lub trzeci .bar.

Answer 1

Oto mój hacktastic odpowiedź: http://jsfiddle.net/thirtydot/gqJdP/2/

/*repeat for as many levels as there could be*/ 
.foo > .bar, 
.foo > :not(.bar) > .bar, 
.foo > :not(.bar) > :not(.bar) > .bar { 
    border-color: blue; 
} 
.bar { 
    border: 1px solid red; 
    padding: 10px; 
} 

Powołując się od komentarza:

Moja sugestia jest opłacalne, chociaż niesmaczne, jeśli można umieścić górną granicę możliwej liczby rodziców między .foo a .bar, które chcesz dopasować. Nawet gdybyś musiał powtórzyć selektor (powiedzmy) 10 razy, nie jest tak źle.

Answer 2

Nie, nie ma sposobu, aby wykonać to, o co prosimy całkowicie przy użyciu tylko CSS. Można wybrać opcję nth-child lub nth-of-type, ale nie the-nth-item-matching-this-selector.

jako „dowód”, przejrzeć listę selektorów CSS3 dostępnych (która obejmuje wszystkie możliwości CSS1 i CSS2.1):
http://www.w3.org/TR/selectors/

Trzeba będzie użyć JavaScript (po stronie klienta lub serwera) -na manipulację (np. dodawanie adnotacji do pierwszego takiego przedmiotu specjalną klasą).

---

Edit: Na podstawie swojej zmiany, można zrobić:

.foo .bar  { font-weight:bold; color:red } 
.foo .bar .bar { font-weight:normal; color:black } 

to trzeba wyraźnie "cofnąć" stylizacji zastosowanego na przodków, które byłyby dziedziczone. To jest "delikatne", jeśli zmienisz styl na przodku, powinieneś także upewnić się, że zmienisz wartość na odpowiedniej "regule" —, ale skutecznej.

A jeśli @thirtydot umieszcza swój hack jako odpowiedź, wszyscy możemy to zaakceptować.

Chociaż prawdopodobnie nie pomaga, należy również pamiętać, że można osiągnąć ten cel with XPath.

Answer 3

ten powinien uzyskać tylko pierwszy element podrzędny .foo:

.foo > .bar 

I nie wybrać się dalej w dół łańcucha.