Selectores CSS: qué son y cómo funcionan

Escrito por: Maria Coppola

190 PROMPTS PARA EMPRESAS

Plantilla gratuita con 190 prompts para escalar tu negocio con inteligencia artificial

Descarga gratis: guía y plantilla para dominar ChatGPT
Selectores CSS

Actualizado:

Publicado:

Construir un sitio web desde cero es, sin duda, lo mejor para tener control absoluto sobre él y para optimizar su velocidad y peso. Sin embargo, crear, diseñar y mantener un sitio en HTML requiere no solo estar familiarizado con ese lenguaje, sino con CSS y Javascript, así como invertir una gran cantidad de tiempo.

La buena noticia es que existen algunos métodos para simplificar esta tarea. Por ejemplo, puedes utilizar selectores CSS para hacer más sencillo el proceso de diseño de tu sitio.

En este artículo daremos un vistazo a estos selectores. Comenzaremos revisando los distintos tipos que existen, así como la forma correcta para usarlos con algunos ejemplos que te ayudarán a crear tu sitio web tal y como quieres que luzca.

<< [Plantilla gratuita] >> Plantillas de códigos de programación para CSS

Los elementos a los que dirige un selector CSS son comúnmente referidos como «sujetos del selector». Estos sujetos pueden seleccionarse con base en el tipo de elemento al que pertenecen, su clase, su nombre de identificación por algún atributo o pseudo-estado.

Con tanta variedad de tipos no solo puedes diseñar tu sitio de manera más rápida; también puedes mantener un control más detallado y específico sobre tu código.

A continuación te explicamos cómo puedes utilizar diferentes tipos de selectores CSS en tu sitio.

Cómo usar selectores en CSS

Existen dos formas posibles de emplear selectores en CSS. Si tienes en un mismo documento tu código en HTML y tu código en CSS, lo único que tienes que hacer es añadir los selectores CSS en la cabecera (<head>) de tu sitio. En el ejemplo que te presentamos más abajo puedes ver cómo funciona este método. 

Si, por el contrario, tu HTML y tu CSS están en documentos separados, quizá tendrás un documento etiquetado como index.html y otro como style.css. El archivo index.html deberá incluir una línea de código que haga un llamado al archivo CSS para que los estilos se muestren en tu sitio web correctamente.

El código en HTML deberá verse del siguiente modo:Ejemplo de archivo en HTML con llamado a estilo en CSS

Es importante notar la presencia de la línea <link rel="stylesheet" href="style.css">. Ese es el llamado a tu archivo CSS. Este archivo solo incluirá los bloques de selectores que revisaremos más adelante, así como algunos otros diseños de CSS.

Ahora que hemos revisado cómo funcionan los selectores CSS veamos algunos de los tipos de selectores más populares para el diseño de sitios web.

Tipos de selectores CSS

A lo largo de esta sección revisaremos seis de los principales tipos de selectores CSS y te daremos algunos ejemplos de selectores para cada uno. Veremos:

  1. Selector universal
  2. Selector de tipo
  3. Selector de clase
  4. Selector de ID 
  5. Selector de atributo
  6. Selector de pseudo-clase

Cada uno de ellos te ayudará a seleccionar diferentes grupos de elementos en un sitio web. Comenzaremos con uno de los tipos que te permitirán dirigirte a grupos grandes de elementos y, posteriormente, veremos algunos que te servirán para seleccionar elementos de manera más específica.

1. Selector universal

El asterisco (*) es el selector universal en CSS. De forma automática, el asterisco selecciona todos los elementos en un documento.

Este selector puede utilizarse en combinación con espacios de nombres (namespace). @namespace es una regla que puedes emplear en documentos con muchos espacios de nombres, como HTML5, SVG en línea, MathML o XML. Al usar espacios de nombres definidos puedes restringir la selección de elementos que se encuentren dentro de ellos.

Sintaxis del selector universal

Un selector universal puede tener cualquiera de las siguientes sintaxis:

  • **|* { propiedades de estilo } - selecciona todos los elementos
  • ns|* { propiedades de estilo } - selecciona todos los elementos en el espacio de nombre (ns)
  • |* { propiedades de estilo } - selecciona todos los elementos sin algún espacio de nombre definido

Ejemplo de selector universal

Supongamos que quieres hacer que todos los elementos de tu página sean de color anaranjado. En este caso lo mejor es utilizar un selector universal.

Así es como luce un documento en HTML:

Ejemplo de archivo HTML para aplicación de un selector universal CSS

Este es el código en CSS con un selector universal para todos lo elementos:

Ejemplo de archivo CSS para aplicación de un selector universal en HTML

Este es el resultado que obtendremos al combinar los archivos:

Resultado de aplicación de selector universal CSS en documento HTML

Fuente

2. Selector de tipo

Un selector de tipo permite seleccionar todos los elementos en HTML que tienen un nombre de nodo común. Por ejemplo, al usar «a» el selector elegirá todos los elementos <a> y les aplicará el valor de la propiedad en CSS. «Input» seleccionará todos los elementos <input>, «span» todos los elementos <span> y así sucesivamente.

Además, puedes usar espacios de nombre definidos para restringir las selecciones de los selectores de tipo a elementos que están dentro de este espacio.

Sintaxis del selector de tipo

La sintaxis del selector de tipo es muy sencilla. Únicamente deberás ingresar en tu código:

  • elemento { propiedades de estilo }

Ejemplo de selector de tipo

Supongamos que tu documento contiene párrafos (<p>) y líneas (<span>). Sin embargo, únicamente quieres darle una tonalidad anaranjada a las líneas. 

Así es como luciría este documento en HTML:

Ejemplo de archivo HTML para aplicación de un selector de tipo CSS

Este es el código en CSS con un selector que define todas las líneas:

Ejemplo de archivo CSS para aplicación de un selector de tipo en HTML

Este es el resultado que obtendremos al combinar los archivos:

Resultado de aplicación de selector de tipo CSS en documento HTML

Fuente

3. Selector de clase

Los selectores de clase son herramientas que, como su nombre lo indica, permiten seleccionar todos los elementos que tienen un mismo nombre de clase. Por ejemplo, .intro te permitirá elegir todos los elementos que pertenecen a la clase «intro», así como .index escogerá todo elemento que tenga una clase «index».

Si utilizas el framework Bootstrap CSS seguramente has notado que todos los estilos usan clases como selectores. Puedes encontrar la lista completa de clases de Bootstrap en W3Schools.

Sintaxis del selector de clase

La sintaxis del selector de clase es la siguiente:

  • .nombre de clase { propiedades de estilo }

Ejemplo de selector de clase

Supongamos que en esta ocasión quieres cambiar todos los elementos de la clase "pastoral" a un color anaranjado. 

Así es como luciría este documento en HTML:

Ejemplo de archivo HTML para aplicación de un selector de clase CSS

Este es el código en CSS con un selector que define todos los elementos pertenecientes a la clase "pastoral":

Ejemplo de archivo CSS para aplicación de un selector de clase en HTML

De acuerdo con estas reglas, la línea en h1 no debe cambiar de color, pero la segunda sí. Este es el resultado:

Resultado de aplicación de selector de clase CSS en documento HTML

Fuente

4. Selector de ID

Un selector de ID está diseñado para seleccionar elementos con base en su atributo de ID. Por ejemplo, #toc seleccionará todos los elementos que tengas como ID «toc». Ten en cuenta que este selector solo funcionará cuando el valor dado en el selector es idéntico al del ID del atributo que quieres referir.

Sintaxis del selector de ID

La sintaxis del selector de ID funciona del siguiente modo:

  • #nombre de ID { propiedades de estilo }

Ejemplo de selector de ID

Si en este ejemplo queremos cambiar el color y la alineación de un elemento nombrado con el ID "hubspot" tendremos que seguir las siguientes instrucciones.

Así es como luciría el código en HTML:

Ejemplo de archivo HTML para aplicación de un selector de ID CSS

Este es el código en CSS con un selector de ID que hace referencia a todos los elementos con el nombre "hubspot":

Ejemplo de archivo CSS para aplicación de un selector de ID en HTML

Este es el resultado:

Resultado de aplicación de selector de ID CSS en documento HTML

Fuente

Ten en cuenta que si el ID del atributo del elemento está escrito en minúsculas el selector deberá incluir el nombre en minúsculas. De lo contrario, los elementos con una diferente escritura no serán seleccionados.

5. Selector de atributo

Los selectores de atributo están hechos para seleccionar todos los elementos que correspondan a un atributo específico o a un valor de atributo definido. Por ejemplo, a[href] elegirá todos los enlaces, mientras que a[href*="hubspot"] únicamente escogerá todas las URL que contengan la palabra «hubspot».

Puedes utilizar este tipo de selector para aplicar reglas de CSS a elementos que tienen un valor de atributo, por lo que si quieres modificar el estilo de todos los elementos que contengan «hubspot» en su URL, deberás utilizar a[href*="hubspot"].

Por otro lado, también puedes utilizar un espacio de nombre en combinación con este selector para restringir la búsqueda a elementos dentro de ese espacio.

Sintaxis del selector de atributo

Algunas de las sintaxis disponibles para el selector de atributo son las siguientes:

  • [attr] { propiedades de estilo }
  • [attr=value] { propiedades de estilo }
  • [attr~=value] { propiedades de estilo }
  • [attr|=value] { propiedades de estilo }
  • [attr^=value] { propiedades de estilo }
  • [attr$=value] { propiedades de estilo }
  • [attr*=value] { propiedades de estilo }

La elección de una de estas sintaxis dependerá de si los elementos que quieres seleccionar tienen atributos que han sido ajustados a un valor específico.

Ejemplo de selector de atributo

Supongamos que quieres hacer que todos los links que contienen «hubspot» cambien el color de la URL a anaranjado. En este caso puedes utilizar a[href*="hubspot"].

Así es como luciría el código en HTML:

Ejemplo de archivo HTML para aplicación de un selector de atributo CSS

Este es el código en CSS con un selector de atributo que modificará todos los elementos que contienen «hubspot» en su URL:

Ejemplo de archivo CSS para aplicación de un selector de atributo en HTML

Este es el resultado:

Resultado de aplicación de selector de atributo CSS en documento HTML

Fuente

Ten en cuenta que si el ID del atributo del elemento está escrito en minúsculas el selector deberá incluir el nombre en minúsculas. De lo contrario, los elementos con una diferente escritura no serán seleccionados.

6. Selector de pseudo-clase

Un selector de pseudo-clase permite aplicar CSS a una selección de elementos o a elementos que se encuentran en un estado específico. Por ejemplo, :hover hará que únicamente se modifique el estilo de un elemento cuando el usuario se desplace sobre él. Otros ejemplos comunes son :active, :visited o :invalid.

Sintaxis del selector de pseudo-clase

La sintaxis del selector de pseudo clase es:

  • selector:puedo-clase { propiedades de estilo }

Ejemplo de selector de pseudo-clase

En este ejemplo queremos cambiar el color de los enlaces a verde cuando el usuario haya visitado los sitios haciendo clic sobre el hipervínculo. Los enlaces con los que no haya interactuado el usuario deberán permanecer en su color original, azul. Además, queremos que los enlaces cambien a un color rosado cuando el usuario se desplace sobre ellos.

Así es como luciría el código en HTML:

So you've already visited blog.hubspot.com. Why not check out our home site at hubspot.com?

Este es el código en CSS con tres diferentes pseudo-clases para los enlaces que no han sido visitados, para aquellos a los que se ha accedido y para aquellos sobre los que se está deslizando el usuario:

Ejemplo de archivo CSS para aplicación de un selector de pseudo-clase en HTML

Este es el resultado:

Resultado de aplicación de selector de pseudo-clase CSS en documento HTML

Fuente

Ahora que te has familiarizado con los principales tipos de selectores CSS hablemos de cómo puedes combinarlos en tu sitio web.

Cómo agrupar múltiples selectores en CSS

Supongamos que tienes una gran diversidad de elementos a los que quieres aplicar el mismo estilo, como un h2 y una clase .spacious, y quieres hacer verdes ambos elementos. El código podría ser escrito en dos líneas diferentes, como puedes ver aquí:

Ejemplo de código para aplicación de selectores combinados en CSS

Otra alternativa es combinar los selectores en una lista de selección. Para crearla únicamente deberás listar todos los selectores que quieres emplear y separarlos con comas antes del corchete que contiene la propiedad de estilo. Ya que el espacio en blanco es válido antes y después de una coma, puedes agregar un espacio después de cada coma para hacer que el código sea más fácil de leer.

De acuerdo con lo anterior la sintaxis sería: elemento, elemento, elemento { propiedad de estilo }. Así luciría nuestro ejemplo:

Ejemplo de código para aplicación de selectores combinados para múltiples elementos en CSS

También puedes ubicar los selectores en su propia línea, si eso te ayuda a hacer más legible tu código. En este caso la sintaxis se verá de este modo:

Ejemplo de código para aplicación de selectores combinados para múltiples elementos en CSS con espacios entre líneas

Combinar selectores CSS es una estrategia que te ayudará a reducir el tamaño de tus documentos y hará que tu página web cargue mucho más rápido.

Los selectores CSS te permiten mantener un buen control respecto al modo en que diseñas y codificas al momento de construir un sitio web desde cero. A pesar de que dominar estas herramientas puede llevarte algo de tiempo, es una inversión que rendirá sus frutos. Aprende a usarlos y prueba con los diferentes tipos que te hemos compartido para que puedas darle el estilo indicado a tu marca con un código elegante, simple y de carga rápida.

Plantillas de código de programación para CSS
Temas: CSS

Artículos relacionados

Plantilla gratuita con 190 prompts para escalar tu negocio con inteligencia artificial

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO