В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.
Соседние селекторы
С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу.
Пример: допустим, вам необходимо, чтобы каждый абзац
Который идет первым после заголовка
, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:
H1+p { font-style: italic; }
Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).
Примеры написания:
/* Отступ от абзаца до картинки 30px */ p+img { padding-top: 30px; } /* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */ h2+h3+p { color: green; }
Родственные селекторы
Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~ .
Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев
Которые идут после заголовка
. Код CSS будет выглядеть так:
H1 ~ p { font-style: italic; }
…и немного HTML для примера:
Заголовок 1
Заголовок 2
Взгляните на HTML-код: стиль применится ко всем тегам
Которые следуют после тега
и находятся до
закрывающего тега родителя . В нашем варианте насчитывается 3 элемента К которым применится стиль. Обратите внимание, что тег
этому никак не помешает. Заметьте также, что в данном случае стиль не будет
применен к тому тегу
Который находится над
, а также к тегу
Имеющему другого родителя
.
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Добрый вечер уважаемые коллеги, сегодня мы изучим с Вами два дополнительных селектора
, которые
называются дочерними и соседними селекторами css
. В большей степени можно обойтись и без них, однако,
для вашего развития их нужно усвоить, и иногда применять, чтобы они оставались в вашей памяти. Поэтому обсудим, какие селекторы
являются
соседними, а какие дочерними и разберем на примере.
Дочерние селекторы css
- элементы, которые располагаются внутри родительского элемента. Пример этому может быть следующим.
Мы имеем блок, в котором находится параграф, еще один блок и картинка. Вот эти три элемента и являются дочерними. Если в дочернем блоке также находятся
другие элементы, то они уже не являются дочерними у первого блока, а являются дочерними у блока, в котором непосредственно находятся. Надеюсь, суть
Вы уловили.
Соседние селекторы CSS
- элементы располагающиеся друг за другом в коде документа. Пример этому такой. Мы имеет параграф и
следующий за ним тег span
. Все довольно ясно, а нам лишь осталось разобрать все это на реальных примерах.
Текст в абзаце
Текст в span
Уже не дочерний текст в абзаце
При помощи стилей добавим одинаковый результат для тега span
Div >
span {
font-size
: 200%;
}
p +
span {
color
: red;
}
Результат выполнения кода в обоих случаях будет применяться к тегу span
, т.к., он является дочерним по отношению к тегу div
и
следующим после тега p
. Поэтому шрифт стал в два раза больше и красного цвета. Теперь мы с Вами полностью разобрались с
дочерними и соседними селекторами в CSS
, а Вам остается лишь укреплять свои знания на практике, до скорого!
Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.
Обучение CSS начинается с классов и ID, а также с использования. и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.
Соседний родственный комбинатор
Начнём с селектора, который удобен в сложных ситуациях, - с соседнего родственного комбинатора. Соседний родственный комбинатор обозначается соединением двух элементов с помощью знака +: H1 + p
Это выделяет следующий p-элемент, расположенный сразу после h1-элемента в DOM. Типографическая теория предполагает, что мы должны использовать отступы в параграфах текста, но только если они следуют за другим параграфом. На практике это может быть использовано, чтобы сделать отступы во всех параграфах, кроме первого:
p + p {
text-indent: 1em;
}
Это гораздо удобней, чем выделять первый параграф с помощью class=«first». Три строки, никаких классов и полная поддержка браузеров. Если вы располагаете тэги img, относящиеся к наполнению сайта, внутри тэгов p (как, собственно, и следует делать), можно просто отодвинуть их левые поля обратно с помощью негативного значения -1em:
p + p img {
margin-left: -1em;
}
Довольно просто, правда? А что, если нам захочется выделить первую строку всех параграфов, которые стоят сразу после заголовков, не изменяя всех остальных параграфов? Опять-таки мы можем использовать класс представления. Простой селектор, сделанный из соседнего составного комбинатора, и псевдо-элемент справятся с задачей:
h1 + p::first-line {
font-variant: small-caps;
}
Примечание: псевдо-элемент:first-line принят в CSS 2.1, в CSS 3 используется запись::, с целью установить различие между псевдо-классами и псевдо-элементами.
Наследственный комбинатор
Обычный протокол разметки – это помещение разделов в как-либо названном элементе в #page или #wrap:
Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
Lorem ipsum dolor sit amet.
Тег
является дочерним по отношению к тегу
Поскольку он находится внутри этого контейнера. Соответственно
Выступает в качестве родителя
.
Lorem ipsum dolor sit amet.
Теги
и
никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера Не влияет на их отношение.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Соседними здесь являются теги
и
, а также
и
. При этом
и
к соседним элементам не относятся из-за того, что между ними расположен контейнер
.
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Соседние селекторы
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Браузеры
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I
).
Не так давно вышла новая, восьмая версия браузера Internet Explorer, и все веб-мастера вздохнули с облегчением. Ведь наконец-то браузер от Microsoft, пусть и с огромным опозданием, начал более-менее уважительно относиться к спецификациям HTML и CSS и адекватно отображать веб-страницы. В общем-то, все ожидали этого еще от седьмой версии. Однако она, на первый взгляд, не принесла ничего нового, кроме поддержки использования вкладок. Но это только на первый взгляд… Мало кто знает еще об одном весьма значительном нововведении в IE7: именно в этой версии данный браузер впервые начал поддерживать новые виды CSS-селекторов.
Селектор - часть CSS-правила, которая указывает, к каким элементам его применять. Основные их виды известны практически всем веб-мастерам. Но не так уж много людей слышали про такую «экзотику», как соседние и дочерние селекторы, а также селекторы атрибутов. Это объясняется тем, что в их использовании долго не было никакого смысла, ведь один из самых популярных браузеров Internet Explorer не обеспечивал их поддержку. Однако сейчас ситуация поменялась, и открывшиеся новые возможности было бы не очень разумным оставлять в стороне. Именно поэтому я и решил написать этот небольшой обзор.
Соседние селекторы
Указывают, что CSS-правило применяется к элементу только тогда, когда он является соседним по отношению к какому-либо другому элементу. Пример:
Элементы называются соседними, когда в коде страницы они , и между ними нет никаких других элементов
Здесь соседними являются теги и , а также и . Теги и соседними не являются, поскольку между ними «вклинился» посторонний элемент .
Синтаксис записи соседнего селектора следующий:
I элемент + II элемент {…}
Давайте составим такое правило для нашего примера:
strong + em { color: red; }
strong + ins { color: blue; }
Вот как будет выглядеть результат:
Как видишь, стиль изменился только для тега , а тег не был затронут. Это очень хорошо иллюстрирует правило соседнего расположения.
Проведем еще один эксперимент - заменим в нашем примере на :
Элементы называются соседними, когда в коде страницы они расположены рядом друг с другом, и между ними нет никаких других элементов
Как нетрудно догадаться, стиль второго из тегов не изменится:
Это происходит потому, что он уже не будет являться соседним для .
Дочерние селекторы
Указывают, что CSS-правило применяется к элементу только тогда, когда он является дочерним по отношению к какому-либо другому элементу. Пример:
Элемент называется дочерним по отношению к тому элементу, в который он вложен, если он является непосредственным потомком этого элемента
Здесь дочерними являются тег по отношению к тегу А также по отношению к . Тег по отношению к тегу Дочерним не является, поскольку тот не является его непосредственным родителем.
Синтаксис записи следующий:
I элемент > II элемент { … }
Дочерние селекторы очень сильно похожи на известные всем контекстные, с той лишь разницей, что для контекстных селекторов глубина вложенности элементов не имеет значения. Для дочерних же глубина вложенности не может быть больше одного уровня. Проиллюстрируем все это, составив несколько правил для нашего примера:
p >
p > em {color: blue; } /* Дочерний селектор */
Мы получим следующий результат:
В нашем случае тег не является дочерним для Поскольку находится на втором уровне вложенности в него. Естественно, что стиль, который должен сделать текст синим цветом, для него не «сработал».
Теперь заменим дочерний селектор на контекстный:
p > strong { color: red; } /* Дочерний селектор */
p em {color: blue; } /* Контекстный селектор */
Результат предсказуем:
В отличие от дочернего, контекстный селектор в данном случае «сработал», поскольку для него не важна глубина уровня вложенности.
Селекторы атрибутов
Указывают, что CSS-правило применяется только к тем элементам, которые содержат указанный в селекторе атрибут. Пример:
CSS - очень важная технология, без использования которой невозможно создать хоть сколько-нибудь приличный сайт
Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения.
Здесь только первый абзац имеет определенный самостоятельно параметр (или атрибут, что одно и то же) align. Следовательно, CSS-правило для селектора атрибута align будет применяться именно к первому абзацу, и только к нему.
Синтаксис записи селектора атрибута:
[атрибут] { … }
Составим правило для нашего примера (для наглядности укажем в дополнение к атрибуту еще и сам тег, для которого его следует рассматривать):
p { color: green; font-weight: bold; }
Нетрудно догадаться, что получится в итоге:
До сих пор я описывал так называемый простой селектор атрибута. Для него важно только само наличие атрибута у тега, но совершенно не важно его значение. Между тем, существуют и другие виды селекторов атрибутов. Давайте вкратце их рассмотрим:
[атрибут=”значение”] { … }
Применяется только к тем элементам, которые имеют указанное значение данного атрибута.
[атрибут^=”значение”] { … }
Почти то же самое, только в этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком.
[атрибут$=”значение”] { … }
Аналогично, с той разницей, что здесь атрибут должен заканчиваться указанным значением.
[атрибут*=”значение”] { … }
Такая запись показывает, что значение может встречаться в любом месте атрибута.
Как видишь, соседние, дочерние и селекторы атрибутов дают нам много новых возможностей для написания эффективного CSS-кода. Можно придумать огромное количество примеров, в которых их использование будет предпочтительнее, чем «традиционных» всем известных селекторов. Поэтому я думаю, будет разумным взять эти приемы на вооружение. А как их применять, решать только тебе.
Автор статьи: Алексей Антонов, создатель и администратор блога о веб-технологиях www.lounwolf.ru
=====================================================================
К которым применится стиль. Обратите внимание, что тег
этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу
Который находится над
, а также к тегу
Имеющему другого родителя
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Добрый вечер уважаемые коллеги, сегодня мы изучим с Вами два дополнительных селектора
, которые
называются дочерними и соседними селекторами css
. В большей степени можно обойтись и без них, однако,
для вашего развития их нужно усвоить, и иногда применять, чтобы они оставались в вашей памяти. Поэтому обсудим, какие селекторы
являются
соседними, а какие дочерними и разберем на примере.
Дочерние селекторы css
- элементы, которые располагаются внутри родительского элемента. Пример этому может быть следующим.
Мы имеем блок, в котором находится параграф, еще один блок и картинка. Вот эти три элемента и являются дочерними. Если в дочернем блоке также находятся
другие элементы, то они уже не являются дочерними у первого блока, а являются дочерними у блока, в котором непосредственно находятся. Надеюсь, суть
Вы уловили.
Соседние селекторы CSS
- элементы располагающиеся друг за другом в коде документа. Пример этому такой. Мы имеет параграф и
следующий за ним тег span
. Все довольно ясно, а нам лишь осталось разобрать все это на реальных примерах.
Текст в абзаце
Текст в span
Уже не дочерний текст в абзаце
При помощи стилей добавим одинаковый результат для тега span
Div >
span {
font-size
: 200%;
}
p +
span {
color
: red;
}
Результат выполнения кода в обоих случаях будет применяться к тегу span , т.к., он является дочерним по отношению к тегу div и следующим после тега p . Поэтому шрифт стал в два раза больше и красного цвета. Теперь мы с Вами полностью разобрались с дочерними и соседними селекторами в CSS , а Вам остается лишь укреплять свои знания на практике, до скорого!
Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.
Обучение CSS начинается с классов и ID, а также с использования. и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.
Соседний родственный комбинатор
Начнём с селектора, который удобен в сложных ситуациях, - с соседнего родственного комбинатора. Соседний родственный комбинатор обозначается соединением двух элементов с помощью знака +:H1 + p
Это выделяет следующий p-элемент, расположенный сразу после h1-элемента в DOM. Типографическая теория предполагает, что мы должны использовать отступы в параграфах текста, но только если они следуют за другим параграфом. На практике это может быть использовано, чтобы сделать отступы во всех параграфах, кроме первого:
p + p {
text-indent: 1em;
}
Это гораздо удобней, чем выделять первый параграф с помощью class=«first». Три строки, никаких классов и полная поддержка браузеров. Если вы располагаете тэги img, относящиеся к наполнению сайта, внутри тэгов p (как, собственно, и следует делать), можно просто отодвинуть их левые поля обратно с помощью негативного значения -1em:
p + p img {
margin-left: -1em;
}
Довольно просто, правда? А что, если нам захочется выделить первую строку всех параграфов, которые стоят сразу после заголовков, не изменяя всех остальных параграфов? Опять-таки мы можем использовать класс представления. Простой селектор, сделанный из соседнего составного комбинатора, и псевдо-элемент справятся с задачей:
h1 + p::first-line {
font-variant: small-caps;
}
Примечание: псевдо-элемент:first-line принят в CSS 2.1, в CSS 3 используется запись::, с целью установить различие между псевдо-классами и псевдо-элементами.
Наследственный комбинатор
Обычный протокол разметки – это помещение разделов в как-либо названном элементе в #page или #wrap:Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
Lorem ipsum dolor sit amet.
Тег является дочерним по отношению к тегу
Поскольку он находится внутри этого контейнера. Соответственно
Выступает в качестве родителя .
Lorem ipsum dolor sit amet.
Теги
и
никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера Не влияет на их отношение. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Соседними здесь являются теги и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Браузеры
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I ).
Не так давно вышла новая, восьмая версия браузера Internet Explorer, и все веб-мастера вздохнули с облегчением. Ведь наконец-то браузер от Microsoft, пусть и с огромным опозданием, начал более-менее уважительно относиться к спецификациям HTML и CSS и адекватно отображать веб-страницы. В общем-то, все ожидали этого еще от седьмой версии. Однако она, на первый взгляд, не принесла ничего нового, кроме поддержки использования вкладок. Но это только на первый взгляд… Мало кто знает еще об одном весьма значительном нововведении в IE7: именно в этой версии данный браузер впервые начал поддерживать новые виды CSS-селекторов.
Селектор - часть CSS-правила, которая указывает, к каким элементам его применять. Основные их виды известны практически всем веб-мастерам. Но не так уж много людей слышали про такую «экзотику», как соседние и дочерние селекторы, а также селекторы атрибутов. Это объясняется тем, что в их использовании долго не было никакого смысла, ведь один из самых популярных браузеров Internet Explorer не обеспечивал их поддержку. Однако сейчас ситуация поменялась, и открывшиеся новые возможности было бы не очень разумным оставлять в стороне. Именно поэтому я и решил написать этот небольшой обзор.
Соседние селекторы
Указывают, что CSS-правило применяется к элементу только тогда, когда он является соседним по отношению к какому-либо другому элементу. Пример:
Элементы называются соседними, когда в коде страницы они , и между ними нет никаких других элементов
Здесь соседними являются теги и , а также и . Теги и соседними не являются, поскольку между ними «вклинился» посторонний элемент .
Синтаксис записи соседнего селектора следующий:
I элемент + II элемент {…}
Давайте составим такое правило для нашего примера:
strong + em { color: red; }
strong + ins { color: blue; }
Вот как будет выглядеть результат:
Как видишь, стиль изменился только для тега , а тег не был затронут. Это очень хорошо иллюстрирует правило соседнего расположения.
Проведем еще один эксперимент - заменим в нашем примере на :
Элементы называются соседними, когда в коде страницы они расположены рядом друг с другом, и между ними нет никаких других элементов
Как нетрудно догадаться, стиль второго из тегов не изменится:
Это происходит потому, что он уже не будет являться соседним для .
Дочерние селекторы
Указывают, что CSS-правило применяется к элементу только тогда, когда он является дочерним по отношению к какому-либо другому элементу. Пример:
Элемент называется дочерним по отношению к тому элементу, в который он вложен, если он является непосредственным потомком этого элемента
Здесь дочерними являются тег по отношению к тегу А также по отношению к . Тег по отношению к тегу Дочерним не является, поскольку тот не является его непосредственным родителем. Синтаксис записи следующий: I элемент > II элемент { … }
Дочерние селекторы очень сильно похожи на известные всем контекстные, с той лишь разницей, что для контекстных селекторов глубина вложенности элементов не имеет значения. Для дочерних же глубина вложенности не может быть больше одного уровня. Проиллюстрируем все это, составив несколько правил для нашего примера: p > Мы получим следующий результат: В нашем случае тег не является дочерним для Поскольку находится на втором уровне вложенности в него. Естественно, что стиль, который должен сделать текст синим цветом, для него не «сработал». Теперь заменим дочерний селектор на контекстный: p > strong { color: red; } /* Дочерний селектор */ Результат предсказуем: В отличие от дочернего, контекстный селектор в данном случае «сработал», поскольку для него не важна глубина уровня вложенности. Селекторы атрибутов
Указывают, что CSS-правило применяется только к тем элементам, которые содержат указанный в селекторе атрибут. Пример: CSS - очень важная технология, без использования которой невозможно создать хоть сколько-нибудь приличный сайт Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения. Здесь только первый абзац имеет определенный самостоятельно параметр (или атрибут, что одно и то же) align. Следовательно, CSS-правило для селектора атрибута align будет применяться именно к первому абзацу, и только к нему. Синтаксис записи селектора атрибута: [атрибут] { … }
Составим правило для нашего примера (для наглядности укажем в дополнение к атрибуту еще и сам тег, для которого его следует рассматривать): p { color: green; font-weight: bold; }
Нетрудно догадаться, что получится в итоге: До сих пор я описывал так называемый простой селектор атрибута. Для него важно только само наличие атрибута у тега, но совершенно не важно его значение. Между тем, существуют и другие виды селекторов атрибутов. Давайте вкратце их рассмотрим: [атрибут=”значение”] { … }
Применяется только к тем элементам, которые имеют указанное значение данного атрибута. [атрибут^=”значение”] { … }
Почти то же самое, только в этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком. [атрибут$=”значение”] { … }
Аналогично, с той разницей, что здесь атрибут должен заканчиваться указанным значением. [атрибут*=”значение”] { … }
Такая запись показывает, что значение может встречаться в любом месте атрибута. Как видишь, соседние, дочерние и селекторы атрибутов дают нам много новых возможностей для написания эффективного CSS-кода. Можно придумать огромное количество примеров, в которых их использование будет предпочтительнее, чем «традиционных» всем известных селекторов. Поэтому я думаю, будет разумным взять эти приемы на вооружение. А как их применять, решать только тебе.
p > em {color: blue; } /* Дочерний селектор */
p em {color: blue; } /* Контекстный селектор */
Автор статьи: Алексей Антонов, создатель и администратор блога о веб-технологиях www.lounwolf.ru
=====================================================================