Применение селекторов прямого потомка


Вы хотите задать стилевое оформление для селекторов потомка, но только для дочерних элементов, отстоящих от родительского элемента лишь на один уровень.
Используйте селектор прямого потомка или дочерний селектор (child selector), который обозначается правой угловой скобкой (>), часто стоящей между двумя селекторами типа, как показано далее:
strong { text-decoration: underline;
}
div > strong { text-decoration: none;
}
В случае селектора прямого потомка стиль будет применен только к тому элементу, который является прямым потомком (дочерним элементом) родительского элемента.
Подчеркивается только элемент strong, не входящий в другой элемент, в данном случае элемент div:
Nothing happens to this part of the sentence because this <strong>strong</strong> isn"t the direct child of div.
<div>
However, this <strong>strong</strong> is the child of div.
Therefore, it receives the style dictated in the CSS rule.
</div>

Если в документе не представлено отношение родитель-ребенок, стиль не поддерживается. Это небольшая, но важная разница между селектором прямого потомка и селектором потомка.



Правельные рецепты CSS