CSS Attribute Selectors
Стили HTML-элементов с определенными атрибутами
Можно стиль элементов HTML, которые имеют определенные атрибуты или значения атрибутов.
Селектор CSS [атрибут]
Селектор [attribute] используется для выбора элементов с указанным атрибутом.
В следующем примере выбираются все элементы <a> с целевым атрибутом:
Пример
a[target] {
background-color: yellow;
}
CSS [attribute="value"] Селектор
Селектор [attribute="value"] используется для выбора элементов с указанным атрибутом и значением.
В следующем примере выбираются все элементы < a > с целевым атрибутом = "_бланк":
Пример
a[target="_blank"] {
background-color: yellow;
}
Селектор CSS [атрибут ~ = "value"]
Селектор [attribute~="value"] используется для выбора элементов со значением атрибута, содержащим указанное слово.
В следующем примере выбираются все элементы с атрибутом title, содержащим разделенный пробелами список слов, одним из которых является «цветок»:
Пример
[title~="flower"] {
border: 5px solid yellow;
}
Приведенный выше пример будет соответствовать элементам с названием = "цветок", название = "Летний цветок", и название = "цветок новый", но не название = "Мой-цветок" или название = "Цветы".
Селектор CSS [атрибут | = "значение"]
Селектор [attribute|="value"] используется для выбора элементов с указанным атрибутом, начиная с заданного значения.
В следующем примере выбираются все элементы со значением атрибута Class, начинающимся с "Top":
Примечание: Значение должно быть целым словом, либо в одиночку, как класс = "Top", или за которым следует дефис (-), как класс = "Верхний текст"!
Пример
[class|="top"] {
background: yellow;
}
Селектор CSS [атрибут ^ = "value"]
Селектор [attribute^="value"] используется для выбора элементов, значение атрибута которых начинается с заданного значения.
В следующем примере выбираются все элементы со значением атрибута Class, начинающимся с "Top":
Примечание: Значение не обязательно должно быть целым словом!
Пример
[class^="top"] {
background: yellow;
}
Селектор CSS [атрибут $ = "value"]
Селектор [attribute$="value"] используется для выбора элементов, значение атрибута которых заканчивается заданным значением.
В следующем примере выбираются все элементы со значением атрибута Class, которое заканчивается на "Test":
Примечание: Значение не обязательно должно быть целым словом!
Пример
[class$="test"] {
background: yellow;
}
Селектор CSS [атрибут * = "value"]
Селектор [attribute*="value"] используется для выбора элементов, значение атрибута которых содержит указанное значение.
В следующем примере выбираются все элементы со значением атрибута Class, содержащим "Te":
Примечание: Значение не обязательно должно быть целым словом!
Пример
[class*="te"] {
background: yellow;
}
Укладка форм
Селекторы атрибутов могут быть полезны для стилизации форм без класса или идентификатора:
Пример
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Совет: Посетите наш учебник по формам CSS для получения дополнительных примеров по стилю форм с помощью CSS.
Другие примеры селекторов CSS
Используйте наш Тестер селекторов CSS для демонстрации различных селекторов.
Для полной ссылки на все селекторы CSS, пожалуйста, перейдите к нашей CSS селекторы ссылка.