Книга: 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! Получается, что он тоже относится к комбинаторам. А мы и не знали…
Оглавление книги
