CSS select the first child from elements with particular attribute
css, css-selectors
Solution
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]
Problem
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