Seletor Derivado do CSS

Seletor derivado

Ao definir estilos com base no contexto do elemento em sua posição, você pode tornar a marcação mais concisa.

No CSS1, os seletores que aplicam regras dessa maneira são chamados de seletores contextuais (contextual selectors), devido ao fato de que eles dependem do contexto para aplicar ou evitar uma regra. No CSS2, eles são chamados de seletores derivados, mas independentemente do que você os chame, seu efeito é o mesmo.

Os seletores derivados permitem que você determine o estilo de um rótulo com base no contexto do documento. Ao usar seletores derivados de maneira adequada, podemos tornar o código HTML mais organizado.

Por exemplo, se você quiser que o elemento strong dentro da lista seja itálico, em vez do usual negrito, você pode definir um seletor derivado assim:

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

Atenção para o contexto da cor azul marcada como <strong>:

<p><strong>Eu sou em negrito, não itálico, porque eu não estou na lista, então essa regra não se aplica a mim</strong></p>
<ol>
<li><strong>Eu sou em itálico. Isso é porque o elemento strong está dentro do elemento li.</strong></li>
<li>Eu sou em fonte normal.</li>
</ol>

No exemplo acima, apenas o estilo do elemento strong dentro do li é itálico, não há necessidade de definir uma classe ou id especial para o elemento strong, o código é mais conciso.

Vamos ver as regras CSS abaixo:

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

Abaixo está o HTML afetado por ele:

<p>A palavra fortemente destacada neste parágrafo é<strong>vermelha</strong>.</p>
<h2>Este subtítulo também é vermelho.</h2>
<h2>A palavra fortemente destacada neste subtítulo é<strong>blue</strong>.</h2>

Conteúdo Relacionado

Se você precisar aprender mais sobre seletores derivados, leia o seguinte conteúdo no tutorial avançado do CodeW3C.com: