Saltar navegación

Selector Descendente

Que é o selector descendente?

O selector descendente selecciona os elementos que se encontran dentro doutros elementos. 

Un elemento é descendente doutro cando se encontra entre as etiquetas de apertura e de peche do outro elemento.

A sintaxe formal do selector descendente é o espazo:

selector selector {
  propiedade: valor;
  ...
}

Podemos incluír máis de dous selectores. Así, no seguinte exemplo, o selector descendente componse de catro selectores:

p a span em {
  color: red;
}

Os estilos da regra anterior aplícanse aos elementos de tipo <em> que se encontren dentro de elementos de tipo <span>, que á súa vez se encontren dentro de elementos de tipo <a> que se encontren dentro de elementos de tipo <p>.

Funcionamento

Unha vez que sabemos como se emprega o selector descendente, vamos a ver como no seguinte exemplo seleccionamos todos os elementos <span> da páxina que se encontren dentro dun elemento <p>:

Código a incluír no HTML Código a incluír na regra de estilo CSS 
<!doctype html>
<html>
  <head> 
  ...
  </head>
  
  <body> 
    <p><span>Texto 1</span></p>
    <p><a href="#"><span>Texto 2</span></a></p>
   ....

p span {
  color: red;
}

O selector p span selecciona tanto ao Texto 1 como ao Texto 2. O motivo é que no selector descendente, un elemento non ten que ser descendente directo do outro. A única condición é que un elemento debe estar dentro doutro elemento, sen importar o nivel de profundidade no que se encontre.

Ao resto de elementos <span> da páxina que non están dentro dun elemento <p>, non se lles aplica a regra CSS anterior.

Exemplo...

See the Pen CSS - Selector descendente by Diego Rodicio (@drodicio) on CodePen.

Exemplo da utilización do selector descendente

Exemplo da utilización do selector descendente. Diego Rodicio Álvarez. CC BY-SA

Pulsa no botón de abaixo para descargar este exemplo: