«Los selectores pueden agruparse para formar nuevos tipos de selectores. De esta manera podemos seleccionar varios tipos de etiquetas al mismo tiempo o hacer una selección más específica de algunas etiquetas.
Combinación de selectores: Cuando se quiere aplicar el mismo estilo a varias etiquetas distintas, no es necesario escribir una regla CSS para cada etiqueta, sino que podemos combinar los selectores para que la misma declaración pueda aplicarse a varios selectores al mismo tiempo, para ello basta con escribir los selectores separados por comas:
Ejemplo: h1, h2, h3 { text-align: center; color: navy; }
En este ejemplo estamos aplicando el estilo tanto a las etiquetas h1, como a las etiquetas h2, como a las etiquetas h3, con lo cual en una sóla regla estamos aplicando el estilo a tres tipos de etiquetas diferentes.
Podemos combinar todo tipo de selectores, siempre que vayan separados por comas.
Ejemplo: seccion1, .tipo1, h4 { font-style: italic; }
En este ejemplo se mostrarán en cursiva todas las etiquetas que tengan el atributo id=»seccion1″; todas las etiquetas con el atributo class=»tipo1″ y todas las etiquetas h4
Selector descendente
Un elemento es descendiente de otro, cuando se encuentra entre las etiquetas de apertura y de cierre de dicho elemento, es decir cuando está dentro del otro elemento. El selector descendente selecciona los elementos descendentes que se encuentran dentro de otras etiquetas.
Ejemplo: p em { text-decoration: underline; }
En este ejemplo se seleccionan todas las etiquetas em que estén contenidas dentro de las etiquetas p, pero no afectará a las etiquetas em que no estén contenidas en una etiqueta p
En el selector descendente se escriben todos los elementos seguidos, separados unicamente por espacios. El elemento afectado sólamente es el último, y los demás indican dentro de qué etiquetas está el elemento afectado. Podemos combinar más de dos selectores para formar un selector descendente, pero el elemento afectado sólo será el último.
Ejemplo: sección1 .tipo2 p span { color: red; }
En este ejemplo sólo se verán afectados los elementos con la etiqueta span, que estén contenidos en una etiqueta p, y a su vez estén contenidos en la etiqueta con la clase tipo2 y a su vez dentro de la etiqueta con ld sección1.
Una caracteréstica es que no hace falta ser descendiente directo para que el elemento esté seleccionado, así por ejemplo el selector
p span { font-family: verdana; } afectará por igual a las etiquetas span de las dos líneas siguientes:
texto enletra verdana
texto enletra verdana
El selector descendente es uno de los más usados, ya que permiten mejorar la precisión de los otros selectores. Así, utilizando el selector descendente es posible aplicar diferentes estilos a elementos del mismo tipo.»