Multiple selector
Вкладені селектори
Під час створення веб-сторінки часто доводиться вкладати одні елементи всередину інших. Щоб стилі цих елементів використовувалися коректно, допоможуть вкладені селектори. Наприклад, встановити стиль для <b> тільки коли він розташовується всередині контейнера <p>. Таким чином можна одночасно встановити стиль для окремого елемента, а також елемента, який знаходиться всередині іншого.
Синтаксис
E F { Опис правил стилю }Тут E це батьківський елемент, а F — дочірній елемент, що у контейнері <E>. У цьому випадку стиль буде застосовуватися до елемента <F>, коли дотримується наступного коду <E><F></F></E>. Не обов'язково має бути два елементи, допускається довільний рівень вкладення. У цьому конструкція може записуватися так: div div ul li {...}.
Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Selectors</title>
<style>
p b {
font-family: Times, serif; /* Font family */
font-weight: bold; /* Bold */
color: navy; /* Blue text color */
}
</style>
</head>
<body>
<div><b>Bold text style</b></div>
<p><b>Simultaneously bold text
and highlighted</b></p>
</body>
</html>