HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Псевдоклассы
Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам Web-страницы на основе их состояния (наведен на них курсор мыши или нет) и местоположения в родительском элементе.
Псевдоклассы также используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:
<основной селектор><псевдокласс> { <стиль> }
Псевдоклассы,
Псевдоклассы гиперссылок
Псевдоклассы гиперссылок служат для привязки стилей к гиперссылкам на основе их состояния: является гиперссылка посещенной или непосещенной, щелкает на ней посетитель мышью или только навел на нее курсор мыши и др.
Все псевдоклассы гиперссылок, доступные в стандарте CSS 3:
– :link — непосещенная гиперссылка;
– :visited — посещенная гиперссылка;
– :active — гиперссылка, на которой посетитель в данный момент щелкает мышью;
– :focus — гиперссылка, имеющая фокус ввода (подробнее о фокусе ввода см. в главе 6);
– :hover — гиперссылка, на которую наведен курсор мыши.
Псевдоклассы гиперссылок применяются совместно со стилями, задающими параметры для гиперссылок. Это могут быть стили переопределения тега <A> или комбинированные стили, созданные на основе стиля переопределения тега <A> (листинг 13.5).
Листинг 13.5
A: link { text-decoration: none }
A: visited { text-decoration: overline }
A: active { text-decoration: underline }
A: focus { text-decoration: underline }
A: hover { text-decoration: underline }
В листинге 13.5 псевдоклассы гиперссылок действуют совместно со стилями переопределения тега <A>. В результате приведенные стили будут применены ко всем гиперссылкам на Web-странице.
Листинг 13.6
A.special: link { color: darkred }
A.special: visited { color: darkviolet }
A.special: active { color: red }
A.special: focus { color: red }
A.special: hover { color: red }
В листинге 13.6 псевдоклассы гиперссылок совмещены с комбинированными стилями, объединяющими стиль переопределения тега <A> и стилевой класс special. Они будут применены только к тем гиперссылкам, к которым был привязан указанный стилевой класс.
Псевдоклассы гиперссылок можно комбинировать, записывая их друг за другом:
A: visited: hover { text-decoration: underline }
Этот стиль будет применен к посещенной гиперссылке, над которой находится курсор мыши.
Псевдоклассы гиперссылок — единственное средство, позволяющее указать параметры для текста гиперссылок. По крайней мере, насколько удалось выяснить автору…
Структурные псевдоклассы
Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы
Псевдоклассы: first-child и: last-child привязывают стиль к элементу Web-страницы, который является, соответственно, первым и последним дочерним элементом своего родителя:
UL: first-child { font-weight: bold }
Этот стиль будет применен к пункту, являющемуся первым дочерним элементом своего родителя-списка, т. е. к первому пункту списка.
Пример:
TD: last-child { color: green }
Данный стиль будет применен к последнему дочернему элементу каждой строки таблицы — к ее последней ячейке.
Листинг 13.7 иллюстрирует более интересный случай.
Листинг 13.7
#cmain P: first-child { font-weight: bold }
.
<DIV ID="cmain">
Этот абзац будет набран зеленым цветом.
<BLOCKQUOTE>
Этот абзац — тоже.
</BLOCKQUOTE>
<BLOCKQUOTE>
И этот — тоже.
А этот — нет.
</BLOCKQUOTE>
</DIV>
Стиль, приведенный в листинге 13.7, будет применен к самому первому абзацу, единственному абзацу в первой большой цитате и первому абзацу во второй большой цитате. Дело в том, что последние два абзаца, к которым будет применен стиль, отсчитываются относительно своих родителей — больших цитат — и в них являются первыми.
А если мы изменим данный стиль вот так:
#cmain > P: first-child { font-weight: bold }
он будет применен только к самому первому абзацу, непосредственно вложенному в контейнер cmain. Ведь мы указали комбинатор >, который предписывает, чтобы элемент, к которому применяется стиль, должен быть непосредственно вложен в своего родителя.
НА ЗАМЕТКУ
Стандарт CSS также описывает псевдоклассы: first-of-type и: last-of-type. Насколько удалось выяснить автору, они работают так же, как и псевдоклассы: first- child и: last-child, которые мы только что изучили. По крайней мере, в текущей реализации поддержки CSS 3…
Псевдокласс: only-of-type привязывает стиль к элементу Web-страницы, который является единственным дочерним элементом, сформированном с помощью данного тега, в своем родителе.
Листинг 13.8 иллюстрирует пример.
Листинг 13.8
P: only-of-type { color: green }
.
<BLOCKQUOTE>
Этот абзац будет набран зеленым цветом.
</BLOCKQUOTE>
<BLOCKQUOTE>
И этот абзац будет набран зеленым цветом.
<ADDRESS>А этот текст — нет.</ADDRESS>
</BLOCKQUOTE>
<BLOCKQUOTE>
И этот — нет.
И этот — нет.
</BLOCKQUOTE>
Стиль из листинга 13.8 будет применен к абзацам, вложенным в первую и вторую большие цитаты, т. к. эти абзацы являются там единственными элементами, сформированными с помощью тега . К абзацам, вложенным в третью большую цитату, стиль применен не будет.