Селекторы 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;
}