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

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

<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

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

Ответы

Ответ 1

Псевдокласс класса :first-child смотрит только на первый дочерний элемент node, поэтому, если первый ребенок не является 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]