Селекторы атрибутов

Помимо селекторов элементов, селекторов идентификаторов и классов, комбинированных селекторов, селекторов псевдоклассов и псевдоэлементов в CSS еще есть селекторы атрибутов, которые позволяют отбирать HTML элементы по конкретным атрибутам и значениям атрибутов.

CSS селектор [атрибут]

Селектор [атрибут] позволяет отбирать HTML элементы, имеющие заданный атрибут.

В следующем примере выбираются все элементы <a> с атрибутом target:

a[target] {
  background-color: yellow;
}

CSS селектор [атрибут="значение"]

Селектор [атрибут="значение"] позволяет отбирать HTML элементы, имеющие заданный атрибут с конкретным значением.

В следующем примере выбираются все элементы <a> с атрибутом target="_blank":

a[target="_blank"] {
  background-color: yellow;
}

CSS селектор [атрибут~="значение"]

Селектор [атрибут~="значение"] позволяет отбирать HTML элементы, в значении заданного атрибута которого содержится определенное слово.

В следующем примере выбираются все элементы с атрибутом title со значением из отдельных слов, разделенных пробелами, одно из которых "flower":

[title~="flower"] {
  border: 5px solid yellow;
}

CSS декларация из примера выше будет относиться к элементам с такими атрибутами как title="flower", title="summer flower" и title="flower new", но не будет относиться к элементам с таким атрибутам как title="my-flower" или title="flowers".

CSS селектор [атрибут|="значение"]

Селектор [атрибут|="значение"] позволяет отбирать HTML элементы с заданным атрибутом, у которого есть в точности заданное значение, либо заданное значение с дефисом (-) на конце.

[class|="top"] {
  background: yellow;
}

Значение должно быть либо целым словом, как, например class="top", словом с дефисом в конце, как, например, class="top-text".

CSS селектор [атрибут^="значение"]

Селектор [атрибут^="значение"] позволяет отбирать HTML элементы с заданным атрибутом, у которого значение начинается с указанных символов.

В следующем примере выбираются все элементы с атрибутом class, у которого значение начинается с "top":

[class^="top"] {
  background: yellow;
}

Значение не обязательно должно быть целым словом!

CSS селектор [атрибут$="значение"]

Селектор [атрибут$="значение"] позволяет отбирать HTML элементы с заданным атрибутом, у которого значение оканчивается указанными символами.

В следующем примере выбираются все элементы с атрибутом class, у которого значение оканчивается на "test":

[class$="test"] {
  background: yellow;
}

Значение не обязательно должно быть целым словом!

CSS селектор [атрибут*="значение"]

Селектор [атрибут*="значение"] позволяет отбирать HTML элементы с заданным атрибутом, который содержит заданное значение.

В следующем примере выбираются все элементы с атрибутом 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;
}