CSS выбирает первого потомка из элементов с определенным атрибутом

Question

Допустим, у нас есть следующий код:

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

Как бы вы выбрали первый ребенок с атрибутом, равным 3? Я думал, что, возможно, это может сделать работу:

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

... но это не сработало

Answer 1

Псевдокласс :first-child просматривает только первый дочерний узел, поэтому, если первый дочерний класс не является element[bla="3"], то ничего не выбирается.

Не существует аналогичного псевдокласса фильтра для атрибутов. Самый простой способ обойти это - выбрать все, а затем исключить то, что следует за первым (этот трюк объясняется здесь и здесь ):

element[bla="3"] {
}

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

Это, конечно, работает только для применения стилей; если вы хотите выделить этот элемент для целей, отличных от стиля (поскольку ваша разметка выглядит как произвольный XML, а не HTML), вам придется использовать что-то еще, например document.querySelector():

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

Или выражение XPath:

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