Контекстный селектор в CSS

Контекстный селектор, представляющий собой команду пробел , позволяет выбирать теги, вложенные в заданного родителя

Синтаксис

селектор1 селектор2 { }

Пример

Давайте обратимся ко всем тегам p внутри тегов div и покрасим их в красный цвет:

<div> <p> text </p> <p> text </p> </div> div p { color: red; }

:

Пример

Давайте обратимся ко всем тегам p внутри элемента с #elem и покрасим их в красный цвет:

<div id="elem"> <p> text </p> <p> text </p> </div> #elem p { color: red; }

:

Пример

Давайте обратимся ко всем тегам p внутри элементов с классом .block и покрасим их в красный цвет:

<div class="block"> <p> text </p> <p> text </p> </div> .block p { color: red; }

:

Пример

Давайте обратимся ко всем тегам b внутри тегов p, находящихся внутри тегов div и покрасим их в красный цвет:

<div> <p> text <b>+</b> </p> </div> div p b { color: red; }

:

Смотрите также