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 псевдокласс смотрит только на первый дочерний узел, поэтому, если первый дочерний класс не является 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]
Источник 

:not([bla="3"]) + [bla="3"] {
  color: red;
}
<div>
  <p bla="1">EL1</p>
  <p bla="2">EL2</p>
  <p bla="3">EL3</p>
  <p bla="3">EL3</p>
  <p bla="3">EL3</p>
  <p bla="4">EL4</p>
</div>

Источник
Другие вопросы по тегам