Селекторы атрибутов CSS
Стиль HTML-элементов с определенными атрибутами
Можно стилизовать элементы HTML, которые имеют определенные атрибуты или значения атрибутов.
CSS [атрибут] Селектор
Селектор [attribute]используется для выбора элементов с указанным атрибутом.
В следующем примере выбираются все элементы <a> с целевым атрибутом:
Пример
a[target] {
background-color: yellow;
}
CSS-селектор [attribute="value"]
Селектор [attribute="value"]используется для выбора элементов с указанным атрибутом и значением.
В следующем примере выбираются все элементы <a> с атрибутом target="_blank":
Пример
a[target="_blank"] {
background-color: yellow;
}
CSS [атрибут~="значение"] селектор
Селектор [attribute~="value"]используется для выбора элементов со значением атрибута, содержащим указанное слово.
В следующем примере выбираются все элементы с атрибутом title, который содержит список слов, разделенных пробелами, одним из которых является «цветок»:
Пример
[title~="flower"] {
border: 5px solid yellow;
}
В приведенном выше примере будут сопоставляться элементы с title="цветок", title="летний цветок" и title="цветок новый", но не title="мой-цветок" или title="цветы".
CSS [атрибут|="значение"] селектор
Селектор [attribute|="value"]используется для выбора элементов с указанным атрибутом, значение которого может быть точно указанным значением или указанным значением, за которым следует дефис (-).
Примечание . Значение должно быть целым словом, либо отдельно, например, class="top", либо с последующим дефисом (-), например class="top-text".
Пример
[class|="top"] {
background: yellow;
}
CSS [атрибут^="значение"] селектор
Селектор [attribute^="value"]используется для выбора элементов с указанным атрибутом, значение которого начинается с указанного значения.
В следующем примере выбираются все элементы со значением атрибута класса, начинающимся с «top»:
Примечание . Значение не обязательно должно быть целым словом!
Пример
[class^="top"] {
background: yellow;
}
CSS-селектор [attribute$="value"]
Селектор [attribute$="value"]используется для выбора элементов, значение атрибута которых заканчивается указанным значением.
В следующем примере выбираются все элементы со значением атрибута класса, оканчивающимся на «тест»:
Примечание . Значение не обязательно должно быть целым словом!
Пример
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] Селектор
Селектор [attribute*="value"]используется для выбора элементов, значение атрибута которых содержит указанное значение.
В следующем примере выбираются все элементы со значением атрибута класса, содержащим "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
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |