Selectores CSS

En CSS los selectores se utilizan para delimitar los elementos HTML de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite disponer de una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.

Prerrequisitos: Nociones básicas de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo: Aprender con detalle cómo funcionan los selectores CSS.

¿Qué es un selector?

En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.

Fragmento de código con el elemento h1 resaltado.

En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como h1, o seleccionando una clase, como .special.

En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en la Nivel 3 de especificación de selectores, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.

Listas de selectores

Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una lista de selectores para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un h1 y para una clase .special, los puedo escribir como dos reglas separadas.

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

También los podrías combinar en una lista de selectores, separándolos con una coma.

h1, .special { 
  color: blue; 
} 

Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.

h1,
.special {
  color: blue; 
} 

En el ejemplo siguiente, intenta combinar dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.

 

Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.

En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento h1.

h1 { 
  color: blue; 
} 

..special { 
  color: blue; 
} 

Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a h1 ni a la clase.

h1, ..special { 
  color: blue; 
} 

Tipos de selectores

Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.

Selectores de tipo, de clase y de ID

Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <h1>.

h1 { }

También incluye selectores que delimitan una clase:

.box {

o un ID:

#unique { }

Selectores de atributo

Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:

a[title] { }

O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:

a[href="https://example.com"] { }

Las pseudoclases y los pseudoelementos

Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.

a: hover {}

También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, ::first-line siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<p>, en el ejemplo siguiente), y actúa como si un elemento <span> hubiera delimitado la primera línea, seleccionado y aplicado estilo.

p::first-line { }

Combinadores

El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <article> utilizando el operador de combinación hijo (>):

article > p { }

Próximos pasos

Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en Selectores de tipo, de clase y de ID.

Tabla de referencia de selectores

La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.

Selector Ejemplo Tutorial de aprendizaje de CSS
Selector de tipo h1 {  } Los tipos de selectores
Selector universal * {  } El selector universal
Selector de clase .box {  } Los selectores de clase
Selector de ID #unique { } Los selectores de ID
Selector de atributo a[title] {  } Los selectores de atributo
Pseudoclase p:first-child { } Las pseudoclases
Pseudoelemento p::first-line { } Los pseudoelementos
Operadores de combinación descendentes article p Operadores de combinación descendentes
Operador de combinación de elementos hijo article > p Operadores de combinación de elementos hijo
Operador de combinación de elementos hermanos adyacentes h1 + p Hermanos adyacentes
Operador de combinación general de elementos hermanos h1 ~ p Hermanos generales

En este módulo

  1. La cascada y la herencia
  2. Selectores CSS
  3. El modelo de caja
  4. Fondos y bordes
  5. El uso de diferentes direcciones de texto
  6. El desbordamiento de los contenidos
  7. Los valores y las unidades
  8. Elementos de dimensionado en CSS
  9. Imágenes, media y elementos de formulario
  10. Aplicar estilo a las tablas
  11. Depurar el CSS
  12. Organizar el CSS