Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

CSS: универсальные селекторы на примере работы с атрибутами

Author wmas wmas | Category Category 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>

Думаю, суть конструкции уточнять ненужно. Результат работы будет выглядеть следующим образом:

универсальные селекторы css, атрибуты

Данная фишка очень удобна когда необходимо создать форму редактирования списка каких-то данным. Сразу видно что да как. Ну и вообще… главное иметь фантазию. На этом всё и спасибо за внимание.

P.S. Для тех, кто хочет узнать побольше о селекторах CSS советую ознакомиться с таблицей таковых на блоге Алексея Ильина.

Publish: Суббота Май 30, 2009

One Response for "CSS: универсальные селекторы на примере работы с атрибутами"

feed for comments on this post

  • Комментарий #2819 author: Владимир Reply (subscribed to comments)
    publish: Пятница Май 27, 2011 at 10:09 пп

    Благодарю за информацию. Но конкретное приложение какое-то сомнительное: в поле select статически подсвечивается строка, установленная при загрузке страницы, не зависимо от последующего выбора (смотрел в броузерах Opera и GoogleChrom). Это создает впечатление «залипания» селектора. Не подскажете ли, как изменить цвет собственно динамичестой строки выбора в поле select?


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress