Оглавление

Дочерние селекторы

Контекстный селектор ссылается на всех потомков родительского элемента, в том числе и непрямых потомков.
Рассмотрим следующий код:

<div class="sidebar">
   <p>Этот параграф будет отображен белым цветом.</p>
   <p>Этот тоже.</p>
   <div class="tagline">
      <p>Если мы используем прямых потомков, то текст будет белым, 
если дочернй селектор, то синим
.</p> </div> </div>

В данном примере используется контекстный селектор из предыдущего раздела – .sidebar p. Он ссылается на все элементы p, вложенные в div класса .sidebar p, включая и абзацы, расположенные внутри div класса
tagline. Чтобы указанное оформление распространялось исключительно на прямых потомков элемента div класса sidebar, следует использовать дочерний селектор. Для указания прямого потомка в селекторе используется знак >.

 

В приведенном ниже коде используется новый селектор для задания белого цвета текста абзацев, расположенных непосредственно внутри элемента div класса sidebar (но не внутри элемента div класса tagline):

p {
color: #0000FF;
}
.sidebar>p {
color: #FFFFFF;
}

Предупреждение
Internet Explorer 6 не поддерживает дочерние селекторы. Поэтому в том случае, если задаваемый с их помощью стиль важен для форматирования страницы, необходимо продумать альтернативные способы обращения к требуемому элементу.
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити