Фрагмент главы 13 "Специальные селекторы" книги "HTML 5, CSS 3 и Web 2.0: Разработка современных Web-сайтов".

Все права на этот текст (он приведён ниже, в серой рамке) принадлежат мне, Владимиру Дронову. Точнее, мне принадлежат только неимущественные права на книги, а имущественными правами владеет издательство "БХВ-Петербург".

Комбинаторы

Комбинаторы — разновидность специальных селекторов, привязывающая стиль к элементу Web-страницы на основании его местоположения относительно других элементов.

Комбинатор + позволяет привязать стиль к элементу Web-страницы, непосредственно следующему за другим элементом. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:

<элемент 1> + <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который должен непосредственно следовать за элементом 1.

Листинг 13.1

H6 + PRE { font-size: smaller }
. . .
<H6>Это заголовок</H6>
<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>
<P>А этот - обычным шрифтом.</P>
<H6>Это заголовок</H6>
<P>И этот - обычным шрифтом.</P>
<PRE>И этот - обычным шрифтом.</PRE>

Стиль, описанный в листинге 13.1, будет применен только к первому тексту фиксированного форматирования, так как он непосредственно следует за заголовком шестого уровня.

Комбинатор ~ (тильда) позволяет привязать стиль к элементу Web-страницы, следующему за другим элементом и, возможно, отделенному от него другими элементами. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:

<элемент 1> ~ <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который должен следовать за элементом 1. При этом элемент 2 может быть отделен от элемента 1 другими элементами.

Листинг 13.2

H6 + PRE { font-size: smaller }
. . .
<H6>Это заголовок</H6>
<PRE>Этот текст будет набран уменьшенным шрифтом.</PRE>
<P>А этот - обычным шрифтом.</P>
<H6>Это заголовок</H6>
<P>И этот - обычным шрифтом.</P>
<PRE>А этот - уменьшенным шрифтом.</PRE>

Стиль из листинга 13.2 будет применен к обоим текстам фиксированного формата: и тому, что непосредственно следует за заголовком шестого уровня, и тому, который отделен от заголовка абзацем.

Комбинатор > позволяет привязать стиль к элементу Web-страницы, непосредственно вложенному в другой элемент:

<элемент 1> > <элемент 2> { <стиль> }

Стиль будет привязан к элементу 2, который непосредственно вложен в элемент 1.

Листинг 13.3

BLOCKQUOTE + P { font-style: italic }
. . .
<BLOCKQUOTE>
  <P>Этот абзац будет набран курсивом.</P>
  <DIV>
    <P>А этот абзац - обычным шрифтом.</P>
  </DIV>
</BLOCKQUOTE>

Стиль из листинга 13.3 будет применен только к абзацу, непосредственно вложенному в большую цитату. На второй абзац, последовательно вложенный в большую цитату и блочный контейнер, этот стиль действовать не будет.

Комбинатор <пробел> позволяет привязать стиль к элементу 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 }

Этот стиль будет привязан к первой строке абзаца.