CSS Атрибуты Селекторов
Стиль элементов HTML с определенными атрибутами
Можно стилизовать HTML элементы, которые имеют определенные атрибуты или значения атрибутов.
CSS Селектор [атрибут]
Селектор [атрибут] используется для выбора элементов с заданным атрибутом.
В следующем примере выбираются все элементы <a> с атрибутом [target]:
CSS Селектор [атрибут="значение"]
Селектор [attribute="value"] используется для выбора элементов с заданным атрибутом и значением.
В следующем примере выбираются все элементы <a>
с атрибутом target="_blank":
CSS Селектор [атрибут~="значение"]
Селектор [attribute~="value"] селектор используется для выбора элементов с атрибутом и
значением, содержащее указанное слово.
В следующем примере выбираются все элементы с атрибутом title,
которые содержат слово "цветок":
Пример выше будет соответствовать элементам с title="цветок", title="летний
цветок", и title="цветок новый",
но не title="мой-цвет" или title="цветы".
CSS Селектор [атрибут|="значение"]
Селектор [attribute|="value"] используется для выбора элементов с указанным атрибутом и
значением, начиная с указанного значения.
В следующем примере выбираются все элементы со значением атрибута класса,
которые начинаются с "top":
Примечание: Значение должно быть целым словом, либо в одиночным, как
class="top", или через дефис -,
как class="top-text"!
CSS Селектор [атрибут^="значение"]
Селектор [attribute^="value"] используется для выбора элементов, атрибут значение,
которые начинаются с указанного значения.
В следующем примере выбираются все элементы со значением атрибута класса,
которые начинаются с "top":
Примечание: Значение не обязательно должно быть целым словом!
CSS Селектор [атрибут$="значение"]
Селектор [attribute$="value"] используется для выбора элементов атрибута значений,
который заканчивается указанным значением.
В следующем примере выбираются все элементы со значением атрибута класса,
которые заканчиваются на "test":
Примечание: Значение не обязательно должно быть целым словом!
CSS Селектор [атрибут*="значение"]
Селектор [attribute*="value"] используется для выбора элементов, атрибут значений,
который содержит указанное значение.
В следующем примере выбираются все элементы со значением атрибута класса,
которые содержат "te":
Примечание: Значение не обязательно должно быть целым словом!
Стиль формы
Селекторы атрибутов могут быть полезны для стиля форм без класса или ID:
Пример
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 Справочник Селекторов.
