Выбор элементов по атрибуту в CSS

Да, в современных браузерах можно выбирать атрибуты независимо от их содержимого с помощью следующих селекторов:

[data-my-attribute] {
   /* Стили */
}

[anything] {
   /* Стили */
}

Например, вот ссылка на код-пен: http://codepen.io/jasonm23/pen/fADnu.

Этот подход поддерживается значительной частью браузеров.

Стоит отметить, что данный метод также можно использовать в jQuery селекторах или с помощью document.querySelector.

Эти CSS селекторы используются для выбора элементов на веб-странице в зависимости от значений атрибута data-value. Вот краткий обзор каждого из них:

1. [data-value]: Этот селектор выбирает все элементы, у которых существует атрибут data-value, независимо от его значения.

2. [data-value="foo"]: Здесь мы выбираем элементы, у которых атрибут data-value имеет точно значение foo.

3. [data-value*="foo"]: Этот селектор выбирает элементы, атрибут data-value которых содержит подстроку foo где-либо в своем значении.

4. [data-value~="foo"]: Данный селектор используется для выбора элементов, у которых атрибут data-value имеет значение foo в виде одного из элементов списка, разделенного пробелами.

5. [data-value^="foo"]: Этот селектор выбирает элементы, у которых значение атрибута data-value начинается с foo.

6. [data-value|="foo"]: Здесь мы выбираем элементы, у которых значение атрибута data-value начинается с foo, и это значение может быть частью списка, разделенного дефисами (например, foo-bar, foo).

7. [data-value$="foo"]: Этот селектор выбирает элементы, у которых значение атрибута data-value заканчивается на foo.

Эти селекторы позволяют довольно гибко фильтровать элементы в зависимости от значений атрибутов и могут значительно упростить работу с динамическими данными на странице.

Стоит отметить, что в CSS3 есть селекторы атрибутов для работы с подстроками:

[attribute^=value] { /* селектор: начинается с указанного значения */
/* Стили */
}

[attribute$=value] { /* селектор: заканчивается указанным значением */
/* Стили */
}

[attribute*=value] { /* селектор: содержит указанное значение */
/* Стили */
}

Эти селекторы позволяют вам выбирать элементы на основе значений их атрибутов, что делает стилизацию более гибкой. С помощью таких селекторов вы можете применить стили к элементам, даже если их атрибуты не являются полными совпадениями, а только частично соответствуют заданным условиям.