Производные селекторы CSS

Производные селекторы

Определяя стили на основе контекста элемента в его положении, вы можете сделать маркировку более简洁ой.

В CSS1 селекторы, применяющие правила таким образом, называются контекстными селекторами (contextual selectors), так как они зависят от контекста для применения или avoidance правил. В CSS2 они называются производными селекторами, но независимо от того, как вы их называете, их функция остается той же.

Производные селекторы позволяют определять стили для тегов на основе контекста документа. С помощью разумного использования производных селекторов мы можем сделать код HTML более опрятным.

Например, если вы хотите, чтобы элементы strong в списке были italic, а не bold, как обычно, вы можете определить производный селектор следующим образом:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Обратите внимание на контекст кода, помеченного как <strong> синим цветом:

<p><strong>Я использую bold шрифт, а не italic, потому что я не в списке, поэтому это правило не действует на меня</strong></p>
<ol>
<li><strong>Я использую italic шрифт. Это связано с тем, что элемент strong находится внутри элемента li.</strong></li>
<li>Я использую обычный шрифт.</li>
</ol>

В приведенном примере стили italic для элементов strong в элементах li, нет необходимости определять для элементов strong особые классы или идентификаторы, что делает код более простым.

Смотрите также下面的 CSS правила:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

Ниже приведен HTML, на который это влияет:

<p>Сильно выделенное слово в этом абзаце - <strong>красный</strong>.</p>
<h2>Этот подзаголовок также красный.</h2>
<h2>Сильно выделенное слово в этой подзаголовке - это<strong>blue</strong>.</h2>

Связанное содержимое

Если вам нужно углубиться в знания о производных селекторах, пожалуйста, читайте следующий материал в продвинутых уроках CodeW3C.com: