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