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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

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

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.