Руководство по селекторам атрибутов в CSS

Селекторы CSS-атрибутов обеспечивают простой и эффективный способ применения стилей к элементам HTML на основе наличия определенного атрибута или его значения.

Вы можете выбрать селектор атрибута, поместив атрибут (необязательно со значением) в пару квадратных скобок. Вы также можете поместить селектор типа элемента перед ним.

Теперь рассмотрим наиболее распространенные селекторы атрибутов.

CSS-селектор [attribute]

Это самая простая форма селектора атрибута, который применяет правила к элементу, если данный атрибут существует. Например, мы можем стилизовать все элементы, которые имеют атрибут title, используя следующее правило:

[title] {
    color: blue;
}

Селектор [title] в приведенном выше примере соответствует всем элементам, которые имеют атрибут title.

Вы также можете ограничить выборку определенным HTML-элементом, поместив селектор атрибута после селектора типа элемента, например так:

abbr[title] {
    color: red;
}

Селектор abbr[title] соответствует только элементам <abbr>, которые имеют атрибут title, поэтому он соответствует аббревиатуре, но, например, не элементам <a> тоже имеющим атрибут title.

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

Вы можете использовать оператор =, чтобы селектор атрибута соответствовал любому элементу, значение атрибута которого точно равно заданному значению:

input[type="submit"] {
    border: 1px solid green;
}

Селектор в приведенном выше примере соответствует всем элементам <input>, которые имеют атрибут type со значением, равным submit.

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

Вы можете использовать оператор ~=, чтобы селектор атрибута соответствовал любому элементу, значение атрибута которого представляет собой список значений, разделенных пробелами (например, class="alert warning"), одно из которых точно равно указанному значению:

[class~="warning"] {
    color: #fff;
    background: red;
}

Этот селектор сопоставляет любой HTML-элемент с атрибутом класса, который содержит значения, разделенные пробелами, одним из которых является warning. Например, он соответствует элементам, имеющим значения классов: warning, alert warning и т. д.

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

Вы можете использовать оператор |=, чтобы селектор атрибута соответствовал любому элементу, атрибут которого имеет разделенный дефисом список значений, начинающийся с указанного значения:

[lang|=en] {
    color: #fff;
    background: blue;
}

Селектор в вышеприведенном примере соответствует всем элементам, которые имеют атрибут lang, содержащий значение, начинающееся с en, независимо от того, следует ли за этим значением дефис и больше символов. Другими словами, он выберет элементы с атрибутом lang, которые имеют значения en, en-US, en-GB и т. д., но не US-en, GB-en.

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

Вы можете использовать оператор ^=, чтобы селектор атрибута соответствовал любому элементу, значение атрибута которого начинается с указанного значения. Значение не должно быть целым словом.

a[href^="http://"] {
    background: url("external.png") 100% 50% no-repeat;
    padding-right: 15px;
}

Селектор в приведенном выше примере будет нацелен на выбор всех внешних ссылок и добавит небольшую иконку, указывающую, что они откроются в новой вкладке или окне.

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

Аналогично, вы можете использовать оператор $= для выбора всех элементов, значение атрибута которых заканчивается указанным значением. Значение не должно быть целым словом.

a[href$=".pdf"] {
    background: url("pdf.png") 0 50% no-repeat;
    padding-left: 20px;
}

Селектор в приведенном выше примере выбирает все элементы <a>, которые ссылаются на документ PDF, и добавляет небольшую иконку PDF, чтобы предоставить пользователю подсказку о том, что это за ссылка.

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

Вы можете использовать оператор *=, чтобы селектор атрибута соответствовал всем элементам, значение атрибута которых содержит указанное значение.

[class*="warning"] {
    color: #fff;
    background: red;
}

Этот селектор в приведенном выше примере сопоставляет все HTML-элементы с атрибутом класса, значения которого содержат warning. Например, он соответствует элементам, имеющим значения класса warning, alert warning, alert-warning или alert_warning и т.д.

Моделирование форм с помощью селекторов атрибутов

Селекторы атрибутов особенно полезны для оформления форм без использования class или id:

input[type="text"], input[type="password"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background: yellow;
}
input[type="submit"] {
    padding: 2px 10px;
    border: 1px solid #804040;
    background: #ff8040;
}