CSS: универсальные селекторы на примере работы с атрибутами
Здравствуйте, уважаемые читатели блога Курилка.co.ua. Я продолжаю делиться с Вами своими находками в области веб-разработок. Пусть для кого-то универсальные селекторы (selector) CSS уже не новость, но вещь однозначно полезная, чтобы посветить ей отдельную заменку.
Что такое селектор CSS? Существует ряд, скажем так, шаблонов (pattern) определяющих к каким элементам html-документа присвоить CSS правила. Эти структуры и называются селекторами.
Если учесть возможности CSS, описанные в документации по CSS2, то весьма привлекательным здесь является возможность определение элементов, используя их атрибуты. К сожалению, подобные новшества не доступны для Internet Explorer. По крайней мере, седьмая версия этого браузера такой фишки не поддерживает. Ну и фиг с ним, используйте FireFox или другой нормальный браузер.
Со вступлением — разобрали, приступаем к постановке задачи. Используя CSS мне нужно было выделить в форме выпадающего меню (select) пункт (option) с атрибутом selected. Для наглядности приведу следующий пример html-кода:
<select>
<option>News</option>
<option selected="selected">Gigs</option>
<option>Galleries</option>
<option>Tours</option>
<option>Biography</option>
<option>Releases</option>
</select>
Интересующий меня объект я выделил жирным шрифтом. Теперь нам необходимо присвоить ему соответствующие CSS правила: изменим фон и цвет шрифта. Вот здесь нам и пригодится универсальный селектор с определением атрибута. В нашем случае это будет выглядеть следующим образом:
<style>
select option[selected] {
background-color: #F00;
color: white;
}
</style>
Думаю, суть конструкции уточнять ненужно. Результат работы будет выглядеть следующим образом:
Данная фишка очень удобна когда необходимо создать форму редактирования списка каких-то данным. Сразу видно что да как. Ну и вообще… главное иметь фантазию. На этом всё и спасибо за внимание.
P.S. Для тех, кто хочет узнать побольше о селекторах CSS советую ознакомиться с таблицей таковых на блоге Алексея Ильина.
Об авторе
