Css атрибуты: CSS справочник — свойства по алфавиту и с описанием по разделам – Attribute selectors — Web technology for developers

[атрибут="значение"] | 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).

Изменение стиля элемента в зависимости от значения атрибута target

Рис. 1. Изменение стиля элемента в зависимости от значения атрибута target

В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

[атрибут^="значение"] | 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»

HTML атрибуты ссылки

Атрибут Принадлежит к Описание
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>
Результат данного примера:

Отправить ответ

avatar
  Подписаться  
Уведомление о