Для стилизации элементов на основе их атрибутов в CSS используют атрибутные селекторы. 23 Они позволяют выбирать элементы на основе наличия атрибутов, их значений или частей значений атрибутов. 3
Некоторые способы стилизации:
- Точное значение атрибута. 1 Селектор выбирает элементы, у которых атрибут имеет указанное точное значение. 1 Пример: [type='text'] { background-color: #f0f0f0; } — будут выбраны все элементы, у которых атрибут type имеет значение text. 1
- Значение атрибута, начинающееся с определённой строки. 1 Селектор выбирает элементы, у которых значение атрибута начинается с указанной строки. 1 Используется символ ^=. 1 Пример: [href^='https'] { color: green; } — будут выбраны все ссылки (), у которых атрибут href начинается с https. 1
- Значение атрибута, заканчивающееся на определённую строку. 1 Селектор выбирает элементы, у которых значение атрибута заканчивается на указанную строку. 1 Используется символ $=. 1 Пример: [src$='.jpg'] { border: 2px solid red; } — будут выбраны все изображения (
), у которых атрибут src заканчивается на .jpg. 1
- Значение атрибута, содержащее определённую строку. 1 Селектор выбирает элементы, у которых значение атрибута содержит указанную строку. 1 Используется символ =. 1 Пример: [class='button'] { padding: 10px 20px; background-color: blue; color: white; } — будут выбраны все элементы, у которых атрибут class содержит строку button. 1
- Значение атрибута, равное одному из слов в списке. 1 Селектор выбирает элементы, у которых значение атрибута совпадает с одним из слов в списке. 1 Используется символ ~=. 1 Пример: [title~='flower'] { color: pink; } — будут выбраны все элементы, у которых атрибут title содержит слово flower. 1
- Значение атрибута, начинающееся с определённого префикса. 1 Селектор выбирает элементы, у которых значение атрибута начинается с указанного префикса и за ним следует дефис. 1 Используется символ |=. 1 Пример: [lang|='en'] { font-style: italic; } — будут выбраны все элементы, у которых атрибут lang имеет значение en или начинается с en-, например, en-US. 1
