Unidad 17. Estilos CSS Avanzados (III)

17.3. Selectores compuestos

Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo más complejas. A esta combinación de selectores se les llama selectores compuestos.

Ahora veremos estos tipos de combinación:

Agrupación: Los selectores se pueden agrupar separados por comas para asignarles las mismas propiedades, por lo que:

p { background-color: #003; }
.resaltado { background-color: #003; }
#cabecera { background-color: #003; }

Puede escribirse como:

p, .resaltado, #cabecera { background-color: #003; }

Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que esté dentro de otro. Por ejemplo:

#contenido {
  color: #0000FF;
  background-color: #FFC;
}
.resaltado { background-color: #FFC; } 

Esto hará que tanto el elemento #contenido como los elementos con la clase .resaltado tengan el mismo color de fondo. ¿Pero qué ocurre si queremos resaltar algo dentro de #contenido? Como no se verá ¿tenemos que crear otra clase? No es necesario, podemos indicar propiedades distintas que afecten a la clase .resaltado sólo cuando se encuentre dentro del elemento #contenido. Lo hacemos escribiendo lo selectores en orden jerárquico y separados por espacios:

#contenido .resaltado { background-color: #06F; }

Ahora los textos marcados con la clase .resaltado dentro de #contenido se verán con otro color de fondo.

Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior.

Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:

#contenedor p .derecha { float: right; }

En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un párrafo dentro del elemento definido como contenedor flotarán a la derecha.

 Cursos Informática Gratuitos