Selectores CSS

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

que tenga un atributo class=”aviso”.

Enlace con un atributo id igual a inicio que se encuentra dentro de un elemento de tipo <li> con un atributo class igual a destacado, que forma parte de una lista <ul> con un atributo id igual a menuPrincipal.

Selector de hijos

Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento.

Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el “signo de mayor que” (>)

Selector adyacente

El selector adyacente utiliza el signo + y su sintaxis es:

La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

  • elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.
  • elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>

Selecciona todos los párrafos de un elemento salvo el primer párrafo.

Selector de atributos

Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

About Michelle Torres

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.