• Главная  
• Блог  
• CSS селекторы атрибутов

Селекторы атрибутов

Свободную минутку посвятил дальнейшему саморазвитию. В этот раз удалось разобраться с селекторами атрибутов, так как данную вещь довольно часто встречаю.

Что же это такое? И так начнем. Для начала, конечно, можно посмотреть спецификацию 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]')

<div class="clock" data-hour="11" data-min="11"></div>

$('.clock').data('hour');

Вот такая забавная штука селектор атрибутов. ?