РОДИТЕЛЬ-ПОТОМОК

HTML-документы строятся на иерархии элементов.Каждый элемент является или родительским,или дочерним элементами другого элемента.Термины родительский и дочерний элементы являются частными случаями терминов предок и потомок .Разница между этими элементами заключается в том,что если элемент находится на один уровень выше другого,то это родительско-дочерние отношения .Если расстояние от одного элемента до другого составляет больше чем один уровень, то эти отношения предок-потомок .

Селекторы потомков

Существуют селекторы потомков(контестные селекторы).Например ,нужно задать стили для тех элементов,которые присходят от элементов h1.Можно конечно задать атрибут class для каждого элемента i ,находящегося в h1.Но более практично объявить правила,которые соответствуют только элементам i,находящимся внутри элементов h1.
h1 i {color:red;}
Это правило сделает красным текст любого элемента i,который является потомком элемента h1.Текст других элементов i не будет выбран этим правилом.
Пробел между селекторами=это комбинатор.Каджый комбинатор-пробел,если читать справа налево,может примерно истолкован как"являющийся потомком".Таким образом выражение h1 iчитаем как:
элемент i,который является потомком элемента h1

Выбор дочерних элементов

В некоторых случаях нужно выбрать элемент,который является дочерним,а не просто потомком.Для этого используется символ-комбинатор селектора дочерних элементов(>)
Пример:
h2>u{color:green;}
Это правило сделает зеленым элемент u для первого из следующих далее h2 и не сделает для второго

<h2>Не обвиняй меня<u> всесильный </u></h2>

<h2> И не карай меня,<u>молю</u></h2>

Выбор сестринских элементов

Для того,чтобы выбрать элемент расположенный на одном уровне с другим элементом и имеющий того же родителя, применяется комбинатор селектора сестринских элементов(+)
Чтобы выбрать цвет фона голубой,а цвет текста красный,запишем:
h1+p {color:red;background:blue;}
Это означает,что выбираем любой абзац, расположенный за элементом h1 и имеющим общих родителей.