CSS. Селекторы атрибутов
12.02.2014
Теги: CSS • HTML • Web-разработка • Верстка
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег input может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.
/* стиль для input с атрибутом checked */
input[checked] {
/* ... */
}/* стиль для input с атрибутом type="text" */
input[type="text"] {
/* ... */
}Помимо простой выборки элементов по атрибутам, селекторы атрибутов позволяют выбирать элементы исходя из значения атрибута:
элемент[атрибут*="значение"]— атрибут содержит заданное значение.элемент[атрибут^="значение"]— атрибут начинается с заданного значения.элемент[атрибут$="значение"]— атрибут заканчивается на заданное значение.элемент[атрибут~="значение"]— атрибут находится в списке, разделённом пробелами.элемент[атрибут|="значение"]— атрибут находится в списке, разделённом дефисами.
/* оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением pdf */
a[href^="http:"] {
padding-left: 20px;
background-image: url("http.png");
background-repeat: no-repeat;
}
a[href^="mailto:"] {
padding-left: 20px;
background-image: url("mail.png");
background-repeat: no-repeat;
}
a[href$=".pdf"] {
padding-left: 20px;
background-image: url("pdf.png");
background-repeat: no-repeat;
}Для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам:
/* стиль для input с атрибутами type="checkbox" и checked */
input[type="checkbox"][checked] {
/* ... */
}Поиск: CSS • HTML • Web-разработка • Верстка • Селектор • Атрибут