Селекторы атрибутов
Свободную минутку посвятил дальнейшему саморазвитию. В этот раз удалось разобраться с селекторами атрибутов, так как данную вещь довольно часто встречаю.
Что же это такое? И так начнем. Для начала, конечно, можно посмотреть спецификацию CSS 2.0.
Вдоволь насмотревшись на спецификацию, можно прийти к выводу, что в данном случае селектор работает так. Для примера измение бордер для кнопки через CSS:
input[type="button"] {
border:solid 1px #000;
}
Как видно из спецификации, мы можем использовать селектор атрибутов, чтобы задать оформление, не используя class и id. Ведь не всегда удобно лезть в код и добавлять селекторы для необходимых элементов HTML.
Синтаксис селекторов атрибутов:
/* Оформить все элементы с атрибутом type */
[type] {
свойство : значение
}
/* Оформить все элементы с атрибутом type="button" */
[type="button"] {
свойство : значение
}
/* оформить все элементы с атрибутом type, который приблизительно равен button */
[type~="button"] {
свойство : значение
}
/* Оформить все элементы с атрибутом type, у которых первое слово в значении атрибутов — одинаковое */
[type|="button"] {
свойство : значение
}
/* Оформить все элементы с атрибутом type, который начинается с button */
[type^="button"] {
свойство : значение
}
/* Оформить все элементы с атрибутом type, который заканчивается с button */
[type$="button"] {
свойство : значение
}
/* Оформить все элементы с атрибутом type, который содержит button */
[type*="button"] {
свойство : значение
}
Интересные примеры для селектора атрибутов
a[rel*=external] {
/* оформляем внешние ссылки */
}
[data-href*="https"][data-title="Petya"] {
/* можно использовать множественные селекторы атрибутов */
}
Соответственно, можно задать оформление для каждого элемента на странице, у которого есть атрибуты. Можно использовать не только type, но абсолютно любой селектор, например:
div[data-cat="main"] {
border : solid 1px #000;
}
Или еще более компактное использование селектора атрибутов:
[data-cat="main"] {
border : solid 1px #000;
}
Эти же правила можно использовать и для Jquery селекторов по артибуту:
/* Выбрать все элементы с атрибутом type */
$('[type]')
/* Выбрать все элементы с атрибутом type="button" */
$('[type="button"]')
/* Выбрать все элементы с атрибутом type, который приблизительно равен button */
$('[type~="button"]')
/* Выбрать все элементы с атрибутом type, у которых первое слово в значении атрибутов — одинаковое */
$('[type|="button"]')
/* Выбрать все элементы с атрибутом type, который начинается с button */
$('[type^="button"]')
/* Выбрать все элементы с атрибутом type, который заканчивается с button */
$('[type$="button"]')
/* Выбрать все элементы с атрибутом type, который содержит button */
$('[type*="button"]')
Jquery селектор по атрибуту data все также прост:
$('[data-href]')
А что бы получить значение атрибута data надо использовать функцию data:
<div class="clock" data-hour="11" data-min="11"></div>
$('.clock').data('hour');
Вот такая забавная штука селектор атрибутов. ?