Применение контекстных селекторов

Если вы создадите правило, в котором просто укажите тег в качестве селектора, оно будет действовать для всех таких тегов. Например, задав правило:

р {color:red;}

мы выделим красным цветом все абзацы сайта. А если необходимо выделить красным только один конкретный абзац? Для более точного выбора тегов используются контекстные селекторы. Вот пример:

div p {color:red;}

Теперь красным будут выделены только абзацы, содержащиеся внутри тегов div.

Как видно из этого примера, контекстные селекторы используют не просто имя одного тега. Теги, расположенные ближе к объявлению, (а данном случае это р), являются целевыми, оставшийся тег или теги указывают, где в коде должен располагаться целевой тег, чтобы правило было применено. Давайте более подробно обсудим эту идею.

Взглянем на код:

<p><hl>ContextuaI selectors are <em>very</em> selective.</hl>
<p>This example shows how to target a <em>specific</em> tag using Che document hierarchy.</p>
<p>Tags only need to be descendants <span>in the <em>order stated</em> in the selector</span>; other tags can be in between and the selector still works.</p>

Оба абзаца содержат теги em, и если мы напишем правило для тегов em, заключенных внутри тегов р, оно будет применено для обоих этих абзацев. Однако если мы напишем правило для тегов em внутри тегов span внутри тегов р, оно будет применено только ко второму абзацу.

Если вы - новичок в мире XHTML, обратите внимание, что span является нейтральным контейнером. Иными словами, span не оказывает влияния на разметку до тех пор, пока вы не укажете стили. В отличив от div - блочного элемента, который располагается на отдельной строке, span - линейный элемент. По умолчанию, без добавления стилей, текст внутри strong выделяется браузером жирным шрифтом, а em - курсивом.

Теперь, если мы напишем правило:

em {color:green}

и поместим его между тегами style в области head шаблона contextual_selectors_tmpl.htm, то выделим зеленым текст, расположенный между тегами em.

Но как быть, если мы хотим быть более избирательными - допустим, сделать зеленым только текст внутри тегов em в абзацах, но не в заголовке? Тогда нам понадобится правило:

p em {color:green}

Так как перед em мы добавили селектор р, теперь правило применяется только для тегов em, расположенных внутри тегов р. Теги em внутри h2 не попадают под действие правила.

Правила с групповыми селекторами применяются для всех перечисленных тегов, а правила с контекстными селекторами - только к последнему указанному тегу, содержащемуся внутри предыдущих, вне зависимости от того, имеются ли между ними какие-либо дополнительные теги. Поэтому наше правило было применено к тегам em внутри тегов span. Несмотря на то, что em не является прямым дочерним элементом для р, правило все равно действует, так как em - потомок р.

Ниже приведен пример способа, при помощи которого можно указать несколько тегов в селекторе, чтобы указать целевой тег еще более избирательно:

р span em {color:green}

Теперь, согласно нашему правилу, зеленым выделен только текст внутри тега em внутри тега span внутри тега р. Заданное правило очень конкретное и под него подпадает только один тег страницы. С помощью контекстных селекторов можно указывать сколько угодно тегов, чтобы гарантировать применение правила именно к нужному вам.

Тем не менее, обратите внимание, что при необходимости применить правило только к слову specific, все становится немного сложнее. Как мы видим, правило р em {color: green;} применяется к тегам em обоих абзацев, и мы не можем применить его только к одному нужному нам тегу. Поэтому вместо контекстного нам потребуется дочерний селектор.