Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS комбинатор потомков

Поддержка браузерами

Описание

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

Комбинатор потомков обозначается символом пробела, который ставится между двумя селекторами, указывая взаимосвязь между ними. Селектор стоящий слева от комбинатора определяется как элемент-предок, селектор стоящий справа от комбинатора определяется как элемент-потомок.

Рассмотрим, как это работает на небольшом примере:

CSS комбинатор потомков

Таким образом мы указали, что стиль будет применён ко всем элементам <span>, которые являются потомками элементов <div>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div span { background-color: yellow; }
    </style>
  </head>
  <body>

    <h1>Добро пожаловать!</h1>

    <div>
      <h2>Меня зовут <span>Арни</span>.</h2>
      <p>Я живу в <span>Дакбурге</span>.</p>
    </div>

    <p>Моего кота тоже зовут Арни.</p>

  </body>
</html>

Результат данного примера

Добро пожаловать!

Меня зовут Арни.

Я живу в Дакбурге.

Моего кота тоже зовут Арни.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen