Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Dochernie-selektory

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

Дочерними называются селекторы, которые располагаются внутри родительского селектора (элемента, тега и т.п). Синтаксис написания предельно прост:

селектор 1 > селектор 2>...>селектор N { свойство1: значение; ... свойствоN: значение}

Описание стилевых свойств будет применено к последнему по вложенности селектору. Для понимания данного урока предлагаю взглянуть на такой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Дочерние селекторы</title>
<style type="text/css">
p > i { color: red }
p>em {color:navy}
</style>
 </head>
 <body> 
   <p>В этом тексте<i>дочерним селектором</i> является
 тег <i>i<i></p>
   <p>В этом тексте тег<strong><em>em</em></strong>не 
является дочерним селектором.
   </p> 
 </body>
</html>

В результате должно получиться следующее:

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

Как вы заметили стилевые свойства, которые мы прописали для тега em не работают. А всё произошло из-за того, что я заведомо прописал не правильную вложенность для данного тега. Ведь родительским элементом для тега em является тег strong. Для того чтобы стилевые свойства подействовали нужно было написать:

p>strong>em {color:navy}

Предлагаю вам немного попрактиковаться и смело переходить к следующему уроку.



наверх