CSS wybrać pierwsze dziecko z elementami ze szczególnym atrybutem

Question

Powiedzmy, że mamy następujący kod:

<node> 
    <element bla="1"/> 
    <element bla="2"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="3"/> 
    <element bla="4"/> 
</node> 

Jak byś go o wybranie pierwszego dziecka, które ma atrybut równa 3? Myślałam, że być może to wykonać zadanie:

element[bla="3"]:first-child 

... ale to nie działa

Answer 1

:first-child Pseudo-klasa wygląda tylko w pierwszym węźle dzieci, więc jeśli pierwszym dzieckiem ISN” t an element[bla="3"], a następnie nic nie zostanie wybrane.

Nie ma podobnej pseudoklasy filtrów dla atrybutów. Prostym sposobem na to jest, aby wybrać każdy wtedy wykluczyć, co przychodzi po pierwszym (ta sztuczka jest wyjaśnione here i here):

element[bla="3"] { 
} 

element[bla="3"] ~ element[bla="3"] { 
    /* Reverse the above rule */ 
} 

To, oczywiście, działa tylko na zastosowanie stylów; jeśli chcesz się wybrać ten element do celów innych niż stylizacji (od Twojego znaczników wydaje się arbitralne XML a nie HTML), musisz użyć czegoś innego jak document.querySelector():

var firstChildWithAttr = document.querySelector('element[bla="3"]'); 

lub wyrażenie XPath:

//element[@bla='3'][1]