CSS Селекторы атрибутов
Стиль HTML-элементов с конкретными атрибутами
Можно стилизовать элементы HTML, которые имеют определенные атрибуты или значения атрибутов.
CSS селектор [attribute]
Селектор [attribute] используется для выбора элементов с указанным атрибутом.
В следующем примере выбираются все элементы <a> с атрибутом target:
CSS селектор [attribute="value"]
Селектор [attribute="value"] используется для выбора элементов с указанным атрибутом и значением.
В следующем примере выбираются все элементы <a> с атрибутом target="_blank":
CSS селектор [attribute~="value"]
Селектор [attribute~="value"] используется для выбора элементов со значением атрибута, содержащим указанное слово.
В следующем примере выбираются все элементы с атрибутом title, который содержит разделенный пробелами список слов, одним из которых является "flower":
Приведенный выше пример будет соответствовать элементам с title="flower", title="summer flower" и title="flower new", но не title="my-flower" или title="flowers".
CSS селектор [attribute|="value"]
Селектор [attribute|="value"] используется для выбора элементов с указанным атрибутом, начиная с указанного значения.
В следующем примере выбираются все элементы со значением атрибута class, которое начинается с "top":
Примечание: Значение должно быть целым словом, либо одно, как class="top", или с последующим дефисом ( - ), как class="top-text"!
CSS [attribute^="value"] Selector
Селектор [attribute^="value"] используется для выбора элементов, значение атрибута которых начинается с указанного значения.
В следующем примере выбираются все элементы со значением атрибута class, которое начинается с "top":
Примечание: Значение не должно быть целым словом!
CSS селектор [attribute$="value"]
Селектор [attribute$="value"] используется для выбора элементов, значение атрибута которых заканчивается указанным значением.
В следующем примере выбираются все элементы со значением атрибута class, которое заканчивается "test":
Примечание: Значение не должно быть целым словом!
CSS селектор [attribute*="value"]
Селектор [attribute*="value"] используется для выбора элементов, значение атрибута которых содержит указанное значение.
В следующем примере выбираются все элементы со значением атрибута class, которое содержит "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 Учебник форм на нашем сайте W3Schools на русском, чтобы получить дополнительные примеры того, как стилизовать формы с помощью CSS.
Проверьте себя с помощью упражнений!
Все CSS селекторы атрибутов
| Селектор | Пример | Описание |
|---|---|---|
| [attribute] | [target] | Выбирает все элементы с атрибутом target |
| [attribute=value] | [target=_blank] | Выбирает все элементы с target="_blank" |
| [attribute~=value] | [title~=flower] | Выбирает все элементы с атрибутом title, содержащим слово "flower" |
| [attribute|=value] | [lang|=en] | Выбирает все элементы со значением атрибута lang, начинающимся с "en" |
| [attribute^=value] | a[href^="https"] | Выбирает каждый элемент <a>, значение атрибута href которого начинается с "https" |
| [attribute$=value] | a[href$=".pdf"] | Выбирает каждый элемент <a>, значение атрибута href которого заканчивается на ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку "w3schools" |
