css selectors - CSS select the first child from elements with particular attribute

Question

Lets say that we have the following code:

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

How would you go about selecting the first child that has attribute equal to 3? I was thinking that perhaps this could do the job:

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

...but it did not work

Answer 1

The :first-child pseudo-class only looks at the first child node, so if the first child isn't an element[bla="3"], then nothing is selected.

There isn't a similar filter pseudo-class for attributes. An easy way around this is to select every one then exclude what comes after the first (this trick is explained here and here):

element[bla="3"] {
}

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

This, of course, only works for applying styles; if you want to pick out that element for purposes other than styling (since your markup appears to be arbitrary XML rather than HTML), you'll have to use something else like document.querySelector():

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

Or an XPath expression:

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