Selectores básicos

Un selector CSS es la herramienta que nos permite seleccionar ("apuntar a ...") uno o varios elementos de nuestro archivo HTML.

Los principales selectores y más utilizados son:

Selector UNIVERSAL
Selector de ETIQUETA
Selector de CLASE
Selector de ID
Selector DESCENDIENTE

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML

* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

El selector universal se indica mediante un asterisco *. A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. No obstante, sí que se suele combinar con otros selectores.

Selector de etiqueta (o de tipo)

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página y cambia el color de la letra:


p { color: #333; }

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML correspondiente a los elementos que se quieren seleccionar, (sin los caracteres < y >). El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:

body {
  max-width : 100vw;
  min-height: 100vh;
}

Cuando varios selectores van a compartir el bloque de declaraciones, los selectores pueden ser agrupados separándolos con una coma ,.

h1, h2, h3, h4, h5, h6 {
  margin         : 0 0 10px 0.5em;
  font-family    : sans-serif;
  font-weight    : normal;
  text-transform : none;
  color          : #333333;
}

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 un elemento HTML para indicar directamente la regla CSS que se le debe aplicar a dicho elemento:


<body>
    <p>Lorem ipsum dolor sit.</p>
    <p class="rojo">Quae provident, ratione!</p>
    <p>Fugit <span class="rojo">voluptatibus</span> quo, labore soluta.</p>
    <h2 class="rojo">Sint, temporibus, vel. Dicta, sunt.</h2>
    <div>Illo minus quo, <span class="rojo">aperiam</span> labore!</div>
</body>

A continuación se crea, en el archivo CSS, una nueva regla, por ejemplo, llamada .rojo con todos los estilos que se van a aplicar al elemento. 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:


.rojo   { color      : #F00; }
.centro { text-align : center; }
.menor  { font-size  :  80%;   }
.sombra { text-shadow: 1px 1px 1px #000; }

En el ejemplo anterior, todos los elementos con el atributo class="rojo" tienen el color de la letra en rojo, es decir, el segundo párrafo, el título h2 y las palabra "voluptatibus" y "aperiam".

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes, como acabamos de ver.

En ocasiones, es necesario restringir el alcance del selector de clase. Para aplicar estilos solamente al párrafo cuyo atributo class sea igual a rojo, combinamos el selector de tipo y el selector de clase, obteniendo un selector mucho más específico:


p.rojo { color: #F00; }

El selector p.rojo se interpreta como "aquellos elementos de tipo p que dispongan de un atributo class con valor .rojo. Es decir, en el ejemplo, solo el segundo párrafo tendrá la letra en rojo.

No debe confundirse el selector de clase con los selectores anteriores y sus combinaciones:


/* Todos los elementos de tipo "p" con atributo class="rojo" */
p.rojo { color: #F00; }
 
/* Todos los elementos con atributo class="rojo" que estén dentro
   de cualquier elemento de tipo "p" */
p .rojo { color: #F00; }
 
/* Todos los elementos "p" de la página y todos los elementos con
   atributo class="rojo" de la página */
p, .rojo { ... }

Por último, 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.


<p class="rojo menor centro sombra">Párrafo de texto...</p>

Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un selector más específico todavía:


.rojo.menor   { color: #F00; }

En el ejemplo anterior, el color de la letra del texto es rojo solo si el elemento tiene la clase menor. El motivo es que se ha utilizado un selector de clase múltiple .rojo.menor, que se interpreta como "aquellos elementos de la página que dispongan de un atributo class con al menos los valores rojo y menor".

Selector por ID

En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

El selector de ID se utiliza principalmente con el lenguaje Javascript para apuntar a un elemento específico.

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 la almohadilla # en vez del punto . como prefijo del nombre de la regla CSS:


#marcado { background-color: #FF0; }


<p>Primer párrafo</p>
<p id="marcado">Segundo párrafo</p>
<p>Tercer párrafo</p>

En el ejemplo anterior, el selector #marcado solamente selecciona el segundo párrafo (cuyo atributo id es igual a marcado).

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Además, todo lo dicho en cuanto a especificidad con los selectores por clase, es válido para los selectores por ID.

Selector descendiente

También se conocen como 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, aunque no sea descendiente directo. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el que se encuentre.

Los selectores descendentes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:


p a span em { font-size: 80%; }

Los estilos de la regla anterior se aplican a los elementos de tipo em que se encuentren dentro de elementos de tipo span, que a su vez se encuentren dentro de elementos de tipo a que se encuentren dentro de elementos de tipo p.

No debe confundirse el selector descendente → separados por un espacio, con la agrupación o combinación de selectores → separados por una coma:


/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { font-size: 80%; }
 
/* El estilo se aplica solo a los elementos "em" que se
   encuentran dentro de "p a span" */
p a span em { font-size: 80%; }