Selectores contextuais

Un selector contextual está composto por varios selectores simples (selectorPrimeiro selectorSegundo) separados por un espazo en branco (non por comas). A regra de estilo aplicarase sobre os elementos afectados polo segundo selector só si están dentro do primeiro selector:

selectorPrimeiro selectorSegundo{
propiedade1:valor1;
...
propiedadeN:valorN;
}

Exemplo de regra de estilo:

p u {
color: blue;
}

Exemplo de código HTML:

<h5>Selectores contextuais. Exemplo</h5>
O selector contextual aplícase aquí e non na liña anterior

Visualización:

Selectores contextuais. Exemplo

O selector contextual aplícase aquí e non na liña anterior

Os selectores contextuais poden definirse en relación con selectores ordinarios, con elementos class, id ou combinacións.

Exemplo de regras de estilo:

p u { color:blue; }

#resume u { color: green; }

.importante u { color: red; }

p.descripcion u { color: magenta; }

A primeira regra de estilos indica que tódolos subliñados dentro dun bloque p se visualicen en cor azul.
A segunda regra de estilos indica que tódolos subliñados dentro dunha etiqueta con id="resume" se visualicen en cor verde.
A terceira regra de estilos indica que tódolos subliñados dentro dun selector que teña aplicado o class="importante" se visualicen en cor vermello.
A carta regra de estilos indica que tódolos subliñados dentro dun paragrafo que teña aplicada o class=descripcion" se visualicen en cor magenta.

Exemplo de código HTML:

<h5>Exemplo de selectores contextuais</h5>
Subliñado dentro dun paragrafo
Subliñado dentro dun elemento identificado como resume
Subliñado dentro dun class importante
Subliñado dentro dun paragrafo con class descripcion
<div class="descripcion">Subliñado normal porque o class é descripcion pero non está nun paragrafo

Visualización:

Exemplo de selectores contextuais

Subliñado dentro dun paragrafo

Subliñado dentro dun elemento identificado como resume

Subliñado dentro dun class importante

Subliñado dentro dun paragrafo con class descripcion

Subliñado normal porque o class é descripcion pero non está nun paragrafo

Seguinte