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

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

Иногда необходимо задать свойства элементу, который располагается непосредственно внутри какого-то другого элемента, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.

Допустим, внутри HTML-документа есть такой код:

<h1>Очень <em>важный</em> заголовок</h1>

Теперь предположим, что мы хотим изменить свойства элемента H1 и слова важный внутри строки. Если мы используем CSS-код, описанный ниже, то повлияем на все элементы EM на странице, а этого делать не нужно:

h1 { color: red }

em { color: blue }

Чтобы повлиять на свойства слова важный, которое в нашем примере находится внутри элемента EM, а тот, в свою очередь, внутри элемента H1, надо использовать следующий CSS-код:

h1 em { color: blue }

Обратите внимание, что в отличие от группировки при обращении к потомкам запятые не ставятся. Количество элементов, которые можно записать потомками, не ограничено. Например:

body div p span { color: green }

Если в документе встретится элемент SPAN, находящийся внутри элемента P, который, в свою очередь, находится внутри элемента DIV, то текст в элементе SPAN будет зеленым. В столь длинных описаниях элемент BODY можно опускать, так как все элементы находятся внутри него.

Если при разработке таблицы стилей вы еще точно не знаете, какой элемент будет размещаться внутри какого, можете воспользоваться символом *. Учтите, что с обеих сторон этого символа обязательно должны находиться пробелы.

Пример, представленный выше, можно переписать так:

body * span { color: green }

Нужно помнить, что текст будет зеленым, даже если элемент SPAN будет просто находиться внутри элемента DIV. Иными словами, звездочкой считается любой набор селекторов и их потомков.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

ГЛАВА 13. Специальные селекторы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

ГЛАВА 13. Специальные селекторы В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на


Селекторы по атрибутам тега

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Селекторы по атрибутам тега Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.Селекторы по атрибутам тега используются не сами по себе, а


Специальные селекторы CSS, предназначенные для работы с элементами управления

Из книги XSLT автора Хольцнер Стивен

Специальные селекторы CSS, предназначенные для работы с элементами управления Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным


ГЛАВА 13. Специальные селекторы 

Из книги Linux программирование в примерах автора Роббинс Арнольд

ГЛАВА 13. Специальные селекторы  В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на


Селекторы по атрибутам тега

Из книги Операционная система UNIX автора Робачевский Андрей М.

Селекторы по атрибутам тега Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.Селекторы по атрибутам тега используются не сами по себе, а


Специальные селекторы CSS, предназначенные для работы с элементами управления

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

Специальные селекторы CSS, предназначенные для работы с элементами управления Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным


Выбор потомков элемента

Из книги автора

Выбор потомков элемента В предыдущем разделе при помощи выражения "PLANET/NAME" я выбирал все элементы <NAME>, являющиеся прямыми потомками элементов <PLANET>, а при помощи выражения "PLANET/*/NAME" — все элементы <NAME>, являющиеся внуками элементов <PLANET>. Есть, однако, более


10.8.3.1. Плохие родители: полное игнорирование потомков

Из книги автора

10.8.3.1. Плохие родители: полное игнорирование потомков Простейшим действием, которое вы можете сделать, является изменение действия для SIGCHLD на SIG_IGN. В этом случае завершившиеся потомки не становятся зомби. Вместо этого статус их завершения отбрасывается, и они полностью


7.3. Селекторы

Из книги автора

7.3. Селекторы Селектором в CSS для простоты понимания будем считать название элемента, для которого задаются свойства. Теперь рассмотрим, как можно задать одни и те же свойства разным элементам


Сестринские селекторы

Из книги автора

Сестринские селекторы Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя


Селекторы атрибутов

Из книги автора

Селекторы атрибутов CSS позволяет создавать правила, сопоставляемые элементам с атрибутами, определенными в исходном коде HTML-документа. Селекторы атрибутов могут сопоставляться в следующих четырех случаях.• [att] – если для элемента установлен атрибут att независимо от


Селекторы классов

Из книги автора

Селекторы классов В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута


ID-селекторы

Из книги автора

ID-селекторы Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за


Селекторы столбцов

Из книги автора

Селекторы столбцов В CSS ячейки таблицы могут принадлежать одному из двух типов групп: строкам или столбцам. В HTML ячейки являются наследующими элементами строк, а не столбцов. Тем не менее на некоторые свойства ячеек оказывают влияние свойства столбцов.Ниже приведен