Комбинатор <пробел> позволяет привязать стиль к элементу Web-страницы, вложенному в другой элемент, причем не обязательно непосредственно:
<элемент 1> <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который так или иначе вложен в элемент 1. При этом элемент 2 может быть вложен в другой элемент, вложенный в элемент 1, или даже в несколько таких элементов последовательно.
Листинг 13.4
BLOCKQUOTE P { font-style: italic }
.
<BLOCKQUOTE>
<P>Этот абзац будет набран курсивом.</P>
<DIV>
<P>Этот абзац — тоже.</P>
</DIV>
</BLOCKQUOTE>
Стиль из листинга 13.4 будет применен к обоим абзацам: и вложенному непосредственно в большую цитату, и тому, что последовательно вложен в большую цитату и блочный контейнер.
Стиль, приведенный в листинге 13.4, нам уже знаком. Да это ведь комбинированный стиль, изученный нами еще в главе 7! Получается, что он тоже относится к комбинаторам. А мы и не знали…
Селекторы по атрибутам тега
Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.
Селекторы по атрибутам тега используются не сами по себе, а только в совокупности со стилями переопределения тега или комбинированными стилями. Их записывают сразу после основного селектора без всяких пробелов и берут в квадратные скобки.
Селектор вида
<основной селектор>[<имя атрибута тега>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем.
Пример:
TD[ROWSPAN] { background-color: grey }
Этот стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN, т. е. к ячейкам, объединенным по горизонтали. Селектор вида
<основной селектор>[<имя атрибута тега>=<значение>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанными именем и значением.
Пример:
TD[ROWSPAN=2] { background-color: grey }
Данный стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значением 2, т. е. к двойным ячейкам, объединенным по горизонтали. Селекторы вида
<основной селектор>[<имя атрибута тега>~=<список значений, разделенных пробелами>] { <стиль> }
и
<основной селектор>[<имя атрибута тега>|=<список значений, разделенных запятыми>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, совпадающим с одним из указанных в списке.
Пример:
TD[ROWSPAN~=2 3] { background-color: grey } TD[ROWSPAN|=2,3] { border: thin dotted black }
Эти стили будут привязаны к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значениями 2 и 3, т. е. к двойным и тройным ячейкам, объединенным по горизонтали.
Селектор вида
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, начинающимся с указанной подстроки.
Пример:
IMG[SRC^=http://www.pictures.ru] { margin: 5px }
Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, начинающимся с подстроки "http://www.pictures.ru", т. е. к изображениям, взятым с Web-сайта http://www.pictures.ru.
Селектор вида
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, заканчивающимся указанной подстрокой.
Пример:
IMG[SRC$=gif] { margin: 10px }
Данный стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, заканчивающимся подстрокой "gif", т. е. к изображениям
формата GIF.
Селектор вида
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }
привязывает стиль к элементам, теги которых имеют атрибут с указанным именем и значением, включающим указанную подстроку.
Пример:
IMG[SRC*=/picts/] { margin: 10px }
Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, включающим подстроку "/picts/", т. е. к изображениям, взятым из папки picts Web-сайта, откуда они загружены.
Псевдоэлементы
Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.
Псевдоэлементы используются не сами по себе, а только в совокупности с другими стилями. Их записывают сразу после основного селектора без всяких пробелов:
<основной селектор><псевдоэлемент> { <стиль> }
Псевдоэлемент::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.
Пример:
P::first-letter { font-size: larger }
Этот стиль будет привязан к первой букве абзаца.
Псевдоэлемент::first-line привязывает стиль к первой строке текста в элементе
Web-страницы:
P::first-line { text-transform: uppercase }
Данный стиль будет привязан к первой строке абзаца.
Псевдоклассы
Псевдоклассы — самая мощная разновидность специальных селекторов. Они позволяют привязать стиль к элементам 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-страницы на основе его местоположения в родительском элементе.
