Selectores CSS

Adicionalmente a los mecanismos ya explicados para "seleccionar" los elementos html a los que se quiere afectar con un set de reglas de estilos existen operadores para hacer reglas mas complejas.

Selector >

El selector > está indicando que el elemento a ser afectado por la regla es el elemento de la derecha cuando tiene al de la izquierda como su padre.

Ejemplo: div > span.texto-rojo { color: red; }

La regla aplicada en este caso afecta solamente al contenido de los <span> a los que se le aplica la regla .texto-rojo y se encuentran dentro de un <div>.

Este valor no se ve afetado aun aplicando la clase .texto-rojo ya que es un <p> y no un <span>.

Selector +

Este selector referencia al elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. Ambos elementos deben compartir el mismo padre.

Ejemplo: span.texto-rojo + span{ color: blue; }

Este elemento span aplica la clase "texto-rojo". Este elemento span es el siguiente elemento span al que aplica la clase "texto-rojo" que se va a ver afectado por la regla.

Selector ~

Este selector es similar al anterior pero el elemento afectado no necesita estar precediendo de inmediato al elemento de la izquierda. Además, más de un elemento puede ser afectado.

Ejemplo: span.texto-rojo ~ p { color: darkgreen; }

Este elemento span aplica la clase "texto-rojo".

Este elemento p es el primero que es precedido por el span al que aplica la clase "texto-rojo".

Este elemento p es el segundo que es precedido por el span al que aplica la clase "texto-rojo".

Este elemento p es el tercero que es precedido por el span al que aplica la clase "texto-rojo" pero tiene un padre diferente.

Selector *

Este selector es el selector universal. Eso quiere decir que lo definido utilizando este selector aplica a todo el documento.

Ejemplo: * { margin: 0px; padding: 0px; }

Esta regla hace que se aplique un margen y padding en 0px;