Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (V)



9.4. Combinaciones de selectores

En este vídeo puedes ver cómo combinar selectores CSS:Videotutorial

1- Selector descendente.

Podemos definir un selector con la condición de que una etiqueta "esté dentro de otra" o lo que es lo mismo, "que descienda" de otra. Una etiqueta desciende de otra si la primera está dentro de las etiquetas de inicio y de cierre de la segunda, independientemente de si hay más etiquetas dentro. Un selector descendente se escribe separando las etiquetas con un espacio en blanco. En el siguiente ejemplo la regla se aplicará a las etiquetas span que estén dentro de una etiqueta div:

div span { color: red  }

Para este fragmento de página:

<h2>Cabecera <span>nivel h2</span> </h2>
<div>Primera <span>división</span> </div>
<div>
<p>Párrafo <span>uno</span></p>
</div>
<p>Párrafo <span>dos</span></p>

Produce el siguiente resultado:

Para explicar de forma más clara este resultado nos vamos a ayudar del siguiente esquema de árbol donde los nodos representan las etiquetas y los rectángulos punteados la relación entre los nodos. (hermamos, padre-hijo y descendientes).

selector hermanos contiguos

Como vemos que la primera etiqueta span que dice "nivel h2" está dentro de la etiqueta h2, no se ve en color rojo porque no está dentro de una etiqueta div. En cambio las dos siguientes etiquetas span sí se ven en color rojo, ya que están dentro de una etiqueta div; no importa a qué nivel de profundidad estén, en el caso de "división" está a primer nivel, (padre-hijo) y en el caso de "uno" está a segundo nivel de profundidad (descendiente).

Un selector descendente, incluye todos los niveles de profundidad. Si queremos tener en cuenta sólo un nivel de profundidad deberemos usar el selector de hijos que vemos a continuación.

También podemos combinarlo con un selector de clase, por ejemplo, el siguiente selector se aplicará a las etiquetas span que estén dentro de una etiqueta p, que a su vez esté dentro de una etiqueta div con la clase clase3.

div.clase3 p span {color: red}

Enero-2019 (V 2.2)
Pág. 9.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.