Селекторы свойств CSS

Установка стиля для HTML элементов с определенным атрибутом

Мы можем установить стиль для HTML элементов с определенным атрибутом или значением атрибута.

Выборщик CSS [attribute]

[attribute] селектор используется для выбора элементов с указанным атрибутом.

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

Пример

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

Попробуйте сами

CSS [attribute="value"] селектор

[attribute="value"] селектор используется для выбора элементов с указанным атрибутом и значением.

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

Пример

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

Попробуйте сами

CSS [attribute~="value"] селектор

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

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

Пример

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

Попробуйте сами

Примеры выше будут соответствовать элементам с такими свойствами: title="flower", title="summer flower" и title="flower new", но не будут соответствовать: title="my-flower" или title="flowers".

CSS [attribute|="value"] селектор

[attribute|="value"] селектор используется для выбора элементов с указанным атрибутом и значением.

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

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

Пример

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

Попробуйте сами

CSS [attribute^="value"] селектор

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

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

Совет:Значение не должно быть полным словом!

Пример

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

Попробуйте сами

CSS [attribute$="value"] селектор

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

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

Совет:Значение не должно быть полным словом!

Пример

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

Попробуйте сами

CSS [attribute*="value"] селектор

[attribute*="value"] селектор выбирает элементы, у которых значение attribute содержит указанное слово.

В следующем примере выбираются все элементы, у которых attribute class содержит "te":

Совет:Значение не должно быть полным словом!

Пример

[class*="te"] {
  background: yellow;
}

Попробуйте сами

Установите стиль формы

Если нужно установить стиль для формы без class или 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-селекторы свойств

Выборка Пример Описание примера
[attribute] [target] Выберите все элементы, у которых есть attribute target.
[attribute=value] [target=_blank] Выберите все элементы, у которых attribute target равен "_blank".
[attribute~=value] [title~=flower] Выберите все элементы, у которых attribute title содержит слово "flower".
[attribute|=value] [lang|=en] Выберите все элементы, у которых attribute lang начинается с "en".
[attribute^=value] a[href^="https"] Выберите каждый элемент <a>, значение attribute href начинается с "https".
[attribute$=value] a[href$=".pdf"] Выберите каждый элемент <a>, значение属性 href заканчивается на ".pdf".
[attribute*=value] a[href*="codew3c"] Выберите каждый элемент <a>, значение href которого содержит подстроку "codew3c".

Дополнительное чтение

Дополнительная литература:Подробное руководство по выборщикам свойств CSS