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

<article>
        <p>На мертвой ветке
        <p>Чернеет ворон.
        <p>Осенний вечер.
        <footer>
                <p>Басё
        </footer>
</article>

Давайте применим обычный контекстный селектор:

article p {
        font-style: italic;
        text-indent: 2em;
}

В результате все элементы абзаца внутри элемента статьи отобразятся курсивом:

Теперь посмотрим на то, как будет выглядеть текст при применении селектора прямого потомка:

article > p {
        font-style: italic;
        text-indent: 2em;
}

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

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

article p {
        font-weight: bolder;
        text-indent: 2em;
}
article footer p {
        font-style: normal;
        text-indent: -2em;
}

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

Автор урока Dudley Storey

Перевод — Дежурка

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

• Использование блочных и строчных элементов
• Использование единиц измерения CSS Q
• Использование значения по умолчанию CSS для сброса настроек