Вложенные селекторы

Описание

При создании веб-страницы часто приходится вкладывать одни элементы внутрь других. Чтобы стили для этих элементов использовались корректно, помогут вложенные селекторы.

Например, задать стиль для b только когда он располагается внутри контейнера p. Таким образом можно одновременно установить стиль для отдельного элемента, а также для элемента, который находится внутри другого.

Приложение к синтаксису:
Здесь E это родительский элемент, а F — дочерний элемент, расположенный в контейнере E. В этом случае стиль будет применяться к элементу , когда соблюдается следующий код . Не обязательно должно быть два элемента, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {...}.

Синтаксис

E F { Описание правил стиля }

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
p b {
font-family: Times, serif;
font-weight: bold;
color: rgb(255, 0, 0);
}
</style>
<div>
<b>
Жирное начертание текста
</b>
</div>
<p>
<b>
Одновременно жирное начертание текста и выделенное цветом
</b>
</p>
</body>
</html>
Жирное начертание текста

Одновременно жирное начертание текста и выделенное цветом

Читайте также

Свойство empty-cells

Указывает, как должна оторажаться граница или фон в ячейке, если она пустая.<br><br>Я...

Стиль посещенных ссылок

Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилев...

Свойство transition-duration

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её заверше...

Свойство font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.&l...

Свойство transition-timing-function

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого примен...