Селектор атрибутов данных CSS — это функция CSS, которая позволяет выбирать элементы HTML на основе пользовательских атрибутов данных. Эти атрибуты данных имеют префикс «data-» и могут использоваться для хранения дополнительной информации об элементе.
Вот несколько методов, которые можно использовать с селектором атрибутов данных CSS:
-
Селектор наличия атрибута. Вы можете выбирать элементы, имеющие определенный атрибут данных, независимо от его значения. Например, чтобы выбрать все элементы с атрибутом данных под названием «data-example», вы можете использовать селектор «[data-example]».
-
Селектор значений атрибутов. Вы можете выбирать элементы, имеющие определенный атрибут данных с определенным значением. Например, чтобы выбрать элементы с атрибутом данных «data-example» и значением «value1», вы можете использовать селектор «[data-example=’value1’]».
-
Селектор значений подстроки: можно выбирать элементы, имеющие определенный атрибут данных со значением, содержащим определенную подстроку. Например, чтобы выбрать элементы с атрибутом данных «data-example», значение которого содержит подстроку «abc», вы можете использовать селектор «[data-example*=’abc’]».
-
Селектор «Начинается с значения». Вы можете выбирать элементы, имеющие определенный атрибут данных, значение которого начинается с определенной подстроки. Например, чтобы выбрать элементы с атрибутом данных «data-example», значение которого начинается с «abc», вы можете использовать селектор «[data-example^=’abc’]».
-
Заканчивается селектором значений. Вы можете выбирать элементы, имеющие определенный атрибут данных со значением, которое заканчивается определенной подстрокой. Например, чтобы выбрать элементы с атрибутом данных «data-example», значение которого заканчивается на «abc», вы можете использовать селектор «[data-example$=’abc’]».
-
Селектор нескольких атрибутов. Вы можете комбинировать несколько селекторов атрибутов, чтобы выбирать элементы, которые имеют несколько атрибутов данных с определенными значениями. Например, чтобы выбрать элементы, у которых «пример данных1» равен «значению1» и «пример данных2» равен «значению2», вы можете использовать селектор «[data-example1=’value1′][data-example2= ‘value2’]”.