Выбор элемента CSS по атрибуту (ам) [множественное число!]

Question

Я использовал селекторы CSS3 для выбора определенных элементов на основе их атрибутов, хотя сегодня я запрограммировал себя в угол, где мне нужно выбрать конкретный элемент на основе наличия ДВУХ различных атрибутов, а не только 1.

например. Мне нужно выбрать первый div.

<div data-foo="bar" data-bar="baz">
<div data-foo="bar" data-bar="lorem">
<div data-foo="ipsum" data-bar="baz">

Ради интереса я попробовал div[data-foo="bar", data-bar="baz"], но неудивительно, что это не сработало.

Есть ли способ для меня получить этот конкретный элемент?

Сейчас единственное решение, которое я могу придумать, - это выбрать все элементы с правильным атрибутом data-foo, а затем просмотреть результаты, чтобы найти элемент с правильным атрибутом data-bar.

Answer 1

Вы были близки, это:

div[data-foo="bar"][data-bar="baz"]

Живой пример

Из спецификации CSS 2.1 :

Здесь селектор сопоставляет все элементы SPAN, чей атрибут "привет" имеет в точности значение "Кливленд", а чей атрибут "до свидания" имеет в точности значение "Колумб":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

(есть также новая спецификация селекторов CSS3 , которая все больше поддерживается, но для этого нам не нужны функции CSS3.)