7 min de lectura

Selector universal

Se utiliza para seleccionar todos los elementos de la página.

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector

CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,)

Es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos.

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

Todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

Cuidado para no confudirse

Si se emplea el selector descendente combinado con el selector universal, se puede restringir el alcance de un selector descendente.

En el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

El selector p * a se traduce como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

Selector de clase

Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:

Combinando selectores

Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco.

Diga de que color es el texto del siguiente párrafo

El color de la letra del texto es azul. El motivo es que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como “aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado”.

Selectores de ID

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de numeral (#) en vez del punto (.) como prefijo del nombre de la regla CSS:

Combinando selectores

Selecciona aquellos elementos con un class=”especial” que se encuentren dentro de cualquier elemento con un class=”aviso”

Selecciona aquellos elementos de tipo con un atributo class=”especial” que estén dentro de cualquier elemento de tipo