| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Специальные селекторы
|
|
Специальные селекторы
Специальный селектор — это селектор, неявно привязывающий стиль к элементу Web-страницы согласно более сложному, чем имя тега, критерию. Таким критерием может быть, например, порядковый номер элемента в родительском элементе, указание на определенную часть содержимого абзаца (первую строку или первую букву), состояние гиперссылки (посещена она или нет) и пр. Обычно специальные селекторы используют в комбинированных стилях, чтобы сделать их более конкретными. Существует несколько разновидностей специальных селекторов, которые сейчас и рассмотрим.
Комбинаторы
Комбинаторы — разновидность специальных селекторов, привязывающая стиль к элементу Web-страницы на основании его местоположения относительно других элементов.
Комбинатор + позволяет привязать стиль к элементу Web-страницы, непосредственно следующему за другим элементом. При этом оба дочерних элемента должны быть вложенными в один и тот же родительский:
<элемент 1> + <элемент 2> { <стиль> }
Стиль будет привязан к элементу 2, который должен непосредственно следовать за элементом 1. При этом элемент 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-страницы, непосредственно вложенному в другой элемент. С помощью приведенного примера, стиль будет привязан к элементу 2, который непосредственно вложен в элемент 1.
<элемент 1> > <элемент 2> { <стиль> }
Листинг 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), нам уже знаком. Это комбинированный стиль, изученный нами еще ранее и он тоже относится к комбинаторам.
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
