Что такое селектор атрибутов?

Все элементы HTML имеют связанные с ними свойства, называемые атрибутами, которые помогают определить характеристики элемента. С помощью селекторов атрибутов вы можете эффективно стилизовать различные элементы на основе их соответствующих атрибутов. Например, элемент p может иметь атрибут Title. Атрибут состоит из двух частей: имени и значения:

<div>
  <p title="text-main">Главный текст с css атрибутом</p>
  <p title="text additional">Текст с css атрибутом</p>
  <p>Текст без css атрибута</p>
</div>

Далее мы можем забрать все p элементы с title атрибутом:

p[title] {
  color: red;
}

Рузультат:

[attribute] селектор

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

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

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

[title='text-main'] {
  color: red;
}

Этот пример применит красный цвет для всех элементов которые имеют title атрибут с text-main значением.

Мы также можем использовать i или I для получения элементов без учета регистра (применимо ко всем селекторам атрибутов со значением):

[title='text-main', i] {
  color: red;
}

В случае, если значение будет - title="Text-Main", то i проигнорирует большие буквы и вернет ожидаемый результат.

Или если нужно учитывать регистр, то можно использовать s или S:

[title='text-main', s] {
  color: red;
}

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

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

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

[title~='text'] {
  color: red;
}

Результат:

Мы так же можем поменять значние на additional - результат не изменится, т.к. он содержится в том же элементе.

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

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

Значение может быть как одно слово (text) так и с дефисом (text-main), например:

[title|='text'] {
  color: red;
}

Выберет два элемента, так как у них содержатся text значение:

<p title="text-main">Главный текст с css атрибутом</p>
<p title="text additional">Текст с css атрибутом</p>

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

С помощью селектора [attribute^="value"] мы выбираем элементы, значение которых начинается с указанного атрибута. Например, [attribute^="value"] выбирает все теги <a>, чьи атрибуты href имеют начальные значения https:

[href^='https'] {
  color: red;
}

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

Селектор [attribute$="value"] выбирает элемент на основе того, чем заканчивается значение его атрибута. Поэтому мы можем указать слово и выбрать элементы с атрибутами, заканчивающимися на указанное значение.

Выбирем все теги <img> с атрибутами src, значение которых заканчивается на .png:

[src$='.png'] {
  border: 1px solid red;
}

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

Мы используем селектор [attribute*="value"] для выбора элементов, значение атрибута которых содержит указанное значение. В приведенном ниже примере селектор [attribute*="value"] выбирает все элементы с атрибутом title и значением, содержащим слово text:

[title*='text'] {
  color: red;
}

В итоге, по сравнению с обычными селекторами (div a), мы можем применить стили к специальным элементам, которые будут подподать под нужные селекторы атрибутов.