smsc banner 468x60smsc banner 728x90smsc banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

Руководство по селекторам атрибутов в 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;
}
beget banner 480x320beget banner 728x90beget banner 120x600jivo banner 480x320jivo banner 728x90jivo banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее