[атрибут=»значение»] | CSS | WebReference
Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.
Синтаксис
[атрибут="<значение>"] { Описание правил стиля }
E[атрибут="<значение>"] { Описание правил стиля }В первом случае стиль применяется ко всем тегам, которые содержат указанное значение атрибута. А во втором — только к определённым селекторам.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Селекторы атрибутов</title> <style> a[target=»_blank»] { background: url(/example/image/blank.png) 0 6px no-repeat; /* Фоновый рисунок */ padding-left: 15px; /* Смещаем текст вправо */ } </style> </head> <body> <p><a href=»page/1.html»>Обычная ссылка</a> | <a href=»page/2.html» target=»_blank»>Ссылка в новом окне</a></p> </body> </html>Результат примера показан ниже (рис. 1).
Рис. 1. Изменение стиля элемента в зависимости от значения атрибута target
В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
[атрибут^=»значение»] | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста.
Синтаксис
[атрибут^=»значение»] { Описание правил стиля }
E[атрибут^=»значение»] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов</title>
<style>
a[href^="http://"] {
font-weight: bold /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="http://htmlbook.ru" target="_blank">Внешняя
ссылка на сайт htmlbook.ru</a></p>
</body>
</html>Результат примера показан ниже (рис. 1).
Рис. 1. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере.
[атрибут*=»значение»] | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, когда частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=. Она определяет, что значение атрибута содержит указанный текст.
Синтаксис
[атрибут*=»значение»] { Описание правил стиля }
E[атрибут*=»значение»] { Описание правил стиля }
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы атрибутов</title>
<style>
[href*="htmlbook"] {
background: yellow; /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |
<a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |
<a href="http://webimg.ru">Графика для Веб</a></p>
</body>
</html>Результат данного примера показан на рис. 1. В примере показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
Рис. 1. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
| Атрибут | Принадлежит к | Описание |
|---|---|---|
| accept | <input> | Указывает типы файлов, которые принимает сервер (только для type=»file») |
| accept-charset | <form> | Задает кодировки символов, которые должны использоваться для отправки формы |
| accesskey | Global Attributes | |
| action | <form> | Указывает, куда отправлять форму-данные при отправке формы |
| align | Не поддерживается в HTML 5. | Задает выравнивание в соответствии с окружающими элементами. Вместо этого используйте CSS |
| alt | <area>, <img>, <input> | Задает альтернативный текст при неудачном отображении исходного элемента |
| async | <script> | Указывает, что сценарий выполняется асинхронно (только для внешних скриптов) |
| autocomplete | <form>, <input> | Указывает, является ли <form> или <input> элемент должен иметь Автозаполнение включено |
| autofocus | <button>, <input>, <select>, <textarea> | Указывает, что элемент должен автоматически получать фокус при загрузке страницы |
| autoplay | <audio>, <video> | Указывает, что воспроизведение аудио/видео начнется сразу после его готовности |
| bgcolor | Not supported in HTML 5. | Задает цвет фона элемента. Вместо этого используйте CSS |
| border | Not supported in HTML 5. | Задает ширину границы элемента. Вместо этого используйте CSS |
| charset | <meta>, <script> | Задает кодировку символов |
| checked | <input> | Указывает, что <input> элеме |
[атрибут] | CSS селектор
Поддержка браузерами
| 12.0+ | 7.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
Для выбора элемента с определенным атрибутом независимо от значения этого атрибута, применяется селектор [атрибут].
Например, можно применить стиль ко всем изображениям, имеющим атрибут alt, отмечая таким образом оформленные правильно изображения:
img[alt] { border: 1px solid blue; }Представленный пример полезен больше для проверки кода, т.е. для выделения изображений с правильным оформлением, чем для целей стилизации элемента. Но он отлично демонстрирует принцип работы селектора [атрибут].
Также можно осуществлять выбор на основании наличия нескольких атрибутов у одного элемента. Это делается путем простого перечисления селекторов атрибутов одного за другим. Например, чтобы выделить зеленым цветом текст любой HTML гиперссылки, которая имеет атрибут href и атрибут title, можно написать так:
а[href][title] { color: green; }При этом стиль будет применен только к ссылкам имеющим оба атрибута.
Пример:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
a[target] { background-color: yellow; }
</style>
</head>
<body>
<p> Ссылка с атрибутом target будет выделена желтым цветом. </p>
<p>
<a href="httр://www.puzzleweb.ru" target="_blank">www.puzzleweb.ru</a><br>
<a href="httр://puzzleweb.ru">puzzleweb.ru</a>
</p>
</body>
</html>