Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
8 г. назад

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

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

Что же это такое? И так начнем. Для начала, конечно, можно посмотреть спецификацию 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|="button"] {свойство:значение} - оформить все элементы с атрибутом type, у которых первое слово в значении атрибутов — одинаковое
[type^="button"] {свойство:значение} - оформить все элементы с атрибутом type, который начинается с "button"
[type$="button"] {свойство:значение} - оформить все элементы с атрибутом type, который заканчивается с "button"
[type*="button"] {свойство:значение} - оформить все элементы с атрибутом type, который содержит "button"

Соответственно, можно задать оформление для каждого элемента на странице, у которого есть атрибуты. Можно использовать не только type, но абсолютно любой парамерт, например:

div[data-cat="main"] { border:solid 1px #000;
}

Но! Есть одно жирное «НО». Опять же, оно зовется IE6. Браузер не поддерживает селекторы атрибутов. Чтобы эту проблему решить, придется использовать снова expression от MicroSoft.

input {border: expression( this.type=="button" ? 'solid 1px #000' : 'inherit' );}

Как подключать только для IE6 должны знать все. Об этом я писал в статье «Как подключить CSS для разных браузеров».

Добавить комментарий

Наверх