¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css

 

 Ver datos Ver explicación

 

2.2 Selectores contextuales
Anterior   Siguiente
|  Introducción  |  Selectores de descendientes  |  Selectores de hijos  |  Selectores de hermanos adyacentes  |

Introducción

Hasta ahora, los selectores que hemos visto se utilizan de una manera directa. Los que veremos en esta página son combinaciones de dos o más selectores ya conocidos que expresan una determinada relación entre ellos. De este modo, podemos identificar un elemento de acuerdo a su posición con respecto a otro elemento.

Estas son las tres alternativas posibles:

*La explicación de algunos conceptos, como padre, hijo, descendiente o hermano se encuentra en la sección sobre Cascada y Herencia.

 Volver 

Selectores de descendientes

Los selectores de descendientes permiten especificar un elemento que está contenido dentro de otro elemento. Veamos el siguiente caso:

H1 {color: red}
P {color: black}
EM {color: red}

Con estas reglas de estilo, el texto de los títulos sería rojo, el texto de los párrafos sería negro y el texto con énfasis también sería rojo. De este modo podemos destacar palabras dentro de un párrafo cambiando su color. Pero, nos resultaría imposible hacer lo mismo dentro de un título porque tanto H1 como EM son de color rojo.

Con un selector de descendiente podemos hacer que el elemento EM sea de color azul en los casos en que se encuentre dentro de un elemento H1 (es decir, sea un descendiente de H1). La forma de especificar esta relación es usando ambos selectores (H1 y EM) separados por un espacio, poniendo en primer lugar el elemento padre:

H1 EM {color: blue} 

Con el agregado de este selector a la Hoja de Estilo, cuando destaquemos una palabra de un párrafo será de color rojo, pero si destacamos una palabra de un título será de color azul.

 Probar 

Podemos combinar tantos selectores como sea necesario. Por ejemplo, para identificar a todos los elementos que tengan asignado el atributo "href" que se encuentren dentro de un párrafo que esté contenido por un elemento DIV, debemos escribir:

DIV P *[href] {color: red}

 Volver 

Selectores de hijos

Los selectores de hijos identifican a un elemento cuando es hijo de otro elemento. El signo ">" se utiliza para combinar los selectores y puede dejarse o no espacio alrededor del mismo:

DIV>P {color: blue}
DIV > P {color: blue}

El ejemplo anterior selecciona los párrafos que son hijos de un elemento DIV. Todas las consideraciones hechas para los selectores de descendientes se aplican en este caso (si hay dudas con respecto a la diferencia entre hijo y descendiente, consulte la sección sobre Cascada y Herencia).

Existe asimismo la posibilidad de seleccionar el primer hijo de un elemento usando la pseudo-clase :first-child.

 Volver 

Selectores de hermanos adyacentes

Los selectores de hermanos adyacentes tienen una sintaxis similar a los dos anteriores, usando como combinador el signo más (+).

H1 + P {text-indent: 0}
H1 + H2 {margin-top: -0.5em}

En el primer caso, se selecciona los párrafos (P) que sigan inmediatamente a un título (H1) y se les quita la sangría. En el segundo, cuando a un título nivel 1 (H1) le sigue uno de nivel 2 (H2), a este último se le adjudica un margen superior negativo para evitar que se separen demasiado entre sí.

Por hermanos adyacentes se entiende aquellos elementos que comparten un mismo padre y que se encuentran uno a continuación del otro en la estructura del documento. El elemento que se selecciona es el que se especifica en segundo lugar.

 Probar 

 Volver