¿Cuáles son los selectores CSS?

14min

Los selectores de CSS son uno de los pilares que debes dominar para poder manejarte con soltura en este lenguaje. Hay muchos selectores disponibles, aunque en el día a día unos se utilizan más que otros. Por eso, con conocer un pequeño conjunto de selectores es posible que consigas realizar las tareas más frecuentes en el desarrollo de páginas, sin embargo tener un dominio amplio sobre ellos te garantizará resultados más profesionales y limpios. En este post los vamos a ver de manera detallada, por lo que resultará útil tanto para desarrolladores web experimentados como los que se inician en el lenguaje CSS.

Índice

¿Qué es un selector CSS?

CSS es un lenguaje utilizado para la definición de los estilos en las páginas web. Para conseguir hacer su trabajo requiere de una herramienta que permita seleccionar las partes de la página en las que se deben aplicar los correspondientes estilos. Los selectores hacen justamente esa función, permitiendo de una manera minuciosa y versátil seleccionar qué elemento o grupo de elementos debe recibir cada regla de estilo.

Existen un gran número de selectores que permiten aportar mucha versatilidad al lenguaje de CSS. Tenemos selectores que aplican estilos a una etiqueta en particular, a todas las etiquetas de un tipo, selectores de clase que nos permiten aplicar estilos a grupos de elementos personalizados, etc. Esos son los selectores más básicos pero también existen otros más complejos que permiten selecciones avanzadas. Todos ellos los vamos a ir viendo progresivamente en este post.

¿Qué diferencia hay entre un selector de clase y uno de ID?

Como hemos dicho, existen selectores de diversos tipos. Algunos de los más frecuentes son los de clase o los de identificador.

  • Los selectores de clase permiten aplicar estilos a todos los elementos que tengan un atributo class en particular definido en cualquier etiqueta del documento.
  • Los selectores de identificador funcionan de manera similar. pero aplicando estilos a los elementos que tengan un atributo id determinado.

Como probablemente sepas, en HTML no se permite tener más de una etiqueta con un mismo «id», mientras que varias etiquetas podrían tener un mismo valor en el atributo «class». Ahí está la diferencia de los selectores de CSS, mientras que el selector de identificador permite aplicar estilos únicamente a un elemento el selector de clase ofrece la posibilidad de reutilizar los estilos para numerosos elementos en la página.

Luego tendremos una sección completa de código de todos los selectores donde podrás ver ejemplos.

¿Para qué sirve un selector CSS?

Ya hemos introducido el uso de selectores en los párrafos anteriores de este post. Pero queremos profundizar para destacar su utilidad en algunos de los puntos importantes.

Definir qué elementos HTML serán afectados por los estilos

La función principal consiste en definir qué elementos deben ser afectados por los estilos definidos en el código CSS, tal como hemos mencionado anteriormente.

De este modo podemos definir los estilos que podría tener un elemento en particular. Pero también a un grupo de elementos dado.

Aplicar diferentes estilos a múltiples elementos de forma eficiente

Las características y posibilidades de los electores hacen que el lenguaje CSS sea muy eficiente, ya que nos permiten definir los elementos a los que se desean aplicar los estilos con mucha versatilidad. Esto permite aplicar estilos de una manera concisa y sin necesitar repetir el código.

Organizar la presentación del contenido sin alterar el HTML

Los sectores de CSS también contribuyen a que los desarrolladores puedan definir y alterar los estilos de la página, de una manera precisa y versátil, sin necesidad de alterar la estructura del HTML para conseguir sus objetivos.

Mejorar la consistencia visual del sitio web

Gracias a los electores de CSS es posible aplicar estilos de manera consistente sin necesidad de repetir el código. Esta consistencia es una de las reglas de oro para conseguir resultados profesionales.

Optimizar la mantenibilidad y escalabilidad del código CSS

Gracias a la potencia de los selectores CSS es posible escribir código comprensible y fácilmente mantenible, además de permitir una elevada optimización. Estos son factores esenciales para que el código CSS sea escalable en proyectos donde se tiene que mantener una elevada complejidad.

Tipos de selectores CSS más comunes

Seguro que estarás deseando ver algo del código así que vamos a introducirnos ya en la práctica, para conocer los CSS selectores de CSS más comunes.

Selectores de tipo (elemento o etiqueta)

Comenzamos por los selectores de etiqueta que permiten definir estilos comunes a todas las etiquetas de un tipo.

Para usarlos simplemente colocamos el nombre de la etiqueta y luego entre las llaves los estilos que deberían aplicarse a ella.

h1 {
  font-size: 2em;
}

Selectores de clase (.clase)

Los electores de clase se aplican a los elementos que tienen un mismo valor de atributo class en el HTML. Se indican con un punto seguido del nombre de la clase. Vamos a ver un ejemplo.

Tenemos esta etiqueta:

<p class='destacado'>Elemento destacado</p>

De modo que podemos aplicar estilos de esta forma.

.destacado {
  background-color: yellow;
}

Lo bueno de este tipo de selector es que podríamos tener varios párrafos destacados en la página y compartirán el mismo estilo.

Selectores de ID (#id)

Los electores de identificador afectan a los elementos que tengan ese identificador. Como hemos dicho, solo debería haber un elemento con el mismo identificador en la página, por lo que en principio sólo afectarán un elemento en particular. Por ese motivo no son demasiado recomendados ya que no permiten de una manera sencilla la reutilización del código.

Se usan con un carácter almohadilla (#), seguido del nombre del identificador.

#menu {
  display: flex;
}

Selectores universales (*)

También tenemos un selector que nos permite aplicar estilos a todos los elementos de la página web, es el selector *.

* {
  box-sizing: border-box;
}

Por ejemplo este selector nos permite hacer un reseteo de los estilos predeterminados del navegador, quitando elementos a veces no deseados como márgenes o paddings que vienen predeterminados en el cliente web.

Selectores de agrupación (,)

A veces queremos aplicar estilos a varios selectores a la vez para ello simplemente colocamos todos los selectores que fuese necesarios separados por comas.

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
}

Selectores de atributo ([atributo=valor])

Quizás menos utilizados, pero extremadamente útiles, son los electores de atributo. Nos permiten aplicar estilos a los elementos que tengan un atributo determinado.

Este selector es bastante versátil ya que también nos permite aplicar estilos a los elementos que tengan un atributo y además un valor determinado. Se usan con la notación de corchetes indicando el atributo y opcionalmente su valor.

input[disabled] {
   color: #ddd;
}

input[type='text'] {
  border: 1px solid #ccc;
}

Selectores combinados y avanzados en CSS

A partir de aquí existe un numeroso grupo de selectores que nos permiten una manera más precisa de llegar a los elementos que necesitemos, o combinarlos de una manera más avanzada.

Estos elementos no son tan utilizados pero si los conocemos podremos echar mano de ellos en muchas ocasiones pudiendo realizar definiciones de estilos muy precisas.

Selectores descendentes (espacio)

En este grupo uno de los electores más utilizados es el selector de descendentes, que nos permite aplicar estilos a elementos dentro de una jerarquía. Por ejemplo, tomamos elementos de párrafo que hay dentro de las divisiones.

div p {
  color: gray;
}

Selectores hijo directo (>)

El anterior selector aplicaría estilos a todos los párrafos que hay dentro de un div pero a veces queremos asegurarnos que los elementos hijo, en este caso los párrafos, sean hijos directos.

div > p {
  color: red
}

De ese modo aplicaremos el CSS para definir el color rojo o solo aquellos párrafos que dependen inmediatamente de una división. Si por ejemplo tuviésemos una división que dentro tiene un section y dentro tiene un párrafo no estaríamos afectando con ese selector.

Selectores de hermano adyacente (+)

El selector de hermano adyacente podemos conseguir aplicar estilos a etiquetas que son hermanas y están inmediatamente después de otras.

h1 + p {
  margin-top: 0;
}

Selectores de hermano general (~)

Otro selector que también tiene en cuenta dos hermanos es la virgulilla de la ñ que nos permite aplicar estilos a los elementos hermanos posteriores sean o no adyacentes.

h1 ~ p {
  color: darkgray;
}

Selectores de pseudoclases (:hover, :active, :first-child, etc.)

Luego hay un conjunto de selectores que son súper importantes para aplicar estilos a los elementos pero cuando tienen un particular estado o posición.

Uno de los más utilizados en este punto es :hover que nos permite aplicar estilos cuando el elemento tiene el cursor del ratón encima de él.

a:hover {
  color: red;
}

Pero hay otros también destacables como :first-child que nos permite definir estilos al primer hijo.

Selectores de pseudoelementos (::before, ::after, ::first-line, etc.)

También tenemos selectores de pseudoelementos, que permiten especificar estilos a partes específicas de un elemento en vez de a todo él de manera completa.

p::first-line {
  font-weight: bold;
}

El anterior selector permitiría definir estilos a la primera línea de un párrafo y no al párrafo completo algo que se apreciaría si ese párrafo se extiende por varias líneas.

¿Se pueden combinar varios selectores en una misma regla CSS?

Aparte del uso de los selectores de manera individual también los podemos combinar para crear selectores más poderosos generales o específicos. De hecho, ésta es una de las grandes ventajas del lenguaje CSS.

Veamos un ejemplo:

h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  color: #333;
}

Aquí estamos combinando varios selectores con una como lo que permite que los estilos se apliquen a todas esas etiquetas de encabezamiento.

Otra de las maneras de combinar selectores es utilizando un espacio en blanco en cuyo caso estamos aplicando los estilos a elementos que forman parte de una jerarquía.

Incluso es posible aplicar un selector de clases sobre una etiqueta particular de modo que solo se pueda modificar el estilo de un tipo de etiqueta que tenga un atributo class, sin que ese atributo class tenga en cuenta en el caso de aparecer en otro tipo de etiqueta.

El siguiente ejemplo combina todas estas posibilidades de una manera completa.

p span.hide {
  display: none;
}

Esto haría que las etiquetas span que tienen la clase hide, siempre que estén dentro de los párrafos, estuvieran ocultas. No aplicaría a etiquetas span que estuvieran fuera de párrafos, no elementos con la clase .hide que no fueran span.

Buenas prácticas para estructurar el CSS

El lenguaje CSS es muy sencillo para empezar a trabajar y también resulta bastante agradecido para los principiantes, sin embargo, para poder hacer un buen uso y crear desarrollos escalables y mantenibles es necesario aplicar algunas unas prácticas que vamos a resumir a continuación.

Utiliza nombres de clases claros y coherentes (metodología BEM)

Nombrar las clases es una de las recomendaciones más importantes para conseguir aportar claridad en nuestros documentos CCSS y mantenibilidad en el código.

No solo se trata de escoger correctamente los nombres de manera que sean suficientemente claros, sino también utilizar alguna metodología consistente de nombrado.

Si quieres profundizar sobre este punto te recomendamos estudiar la metodología BEM (Block, Element, Modifier) que es ampliamente extendida entre los desarrolladores. Esta metodología es una buena idea para conseguir que tu código sea consistente con el del resto del equipo y también a lo largo de los distintos proyectos que puedas realizar.

Evita la sobreespecificidad en los selectores

Tienes que intentar que tu código CSS sea limpio y fácil de entender y uno de los mejores consejos es hacer las cosas simples.

Hay muchos desarrolladores que intentan dar rienda suelta a sus sólidos conocimientos, creando selectores realmente complejos. Eso puede ser un error por varios motivos.

Primero porque los selectores complejos generalmente crean reglas que son difíciles de reutilizar. Pero también porque generalmente tiene una especificidad muy alta que es difícil de sobreescribir con otras reglas de CSS más adelante, lo que hace que tu diseño se vuelva más rígido.

Agrupa estilos relacionados y comenta tu código

En proyectos medianos o grandes el CSS tiende a crecer demasiado. Ante esta circunstancia lo mejor es ser organizado y para ello la recomendación más importante es modularizar tu código.

Puedes conseguirlo haciendo diversos archivos CSS con distintos bloques o componentes de tu web, y luego juntarlos todos mediante imports, apoyado en alguna herramienta de post procesamiento. Si no manejas este tipo de herramientas frontend siempre puedes escribir el código CSS en bloques bien separados y comentar lo que estás haciendo en cada bloque.

Recuerda que los comentarios en CSS se engloban entre /* y */, como puedes ver aquí:

/* === Cabecera === */
.header {
  background-color: #f8f8f8;
  padding: 10px;
}

Centraliza variables y colores mediante hojas de estilo globales

Las nuevas versiones del lenguaje CSS van introduciendo mejoras que permiten crear código más mantenible y versátil. Una de las mejoras son las variables CSS que son muy fáciles de utilizar y resultan ideales para poder tematizar el diseño de tu web, creando distintas unidades con nombre que podrás reutilizar.

Esto es excelente para poder mantener una mejor consistencia en tu diseño lo que dará resultados más profesionales pero también porque te permitirá cambiar cualquier cosa en el CSS más adelante, simplemente editando el valor de una o varias variables.

Minimiza la repetición y prioriza la reutilización de clases

Mantente siempre alerta para evitar repetir el código CSS. En lugar de ello agrupa selectores cuando encuentras los mismos valores y prioriza la utilización de selectores de clase en vez de selectores de identificador.

Herramientas útiles para probar y depurar selectores CSS

Como siempre, nos gusta repasar las mejores herramientas para cada tipo de tarea. Cuando desarrollas con CSS existen algunas que te permitirán componer mejor tus hojas de estilo. Vamos a compartir a continuación las más importantes.

Chrome DevTools

Por supuesto, no podemos empezar por otra utilidad que no sea las herramientas de desarrolladores del navegador Google Chrome.

Si ya trabajas como desarrollador web debes de usarlo mucho en tu día a día. Si no es así, es importante que tomes un poco de tiempo para aprender a sacarle partido a esta herramienta que permite depurar de una manera precisa las reglas de CSS de tus páginas web.

Firefox Developer Tools

Realmente no estás necesariamente casado con Chrome, si utilizas otros navegadores como por ejemplo Mozilla Firefox encontrarás versiones distintas de estas herramientas de depuración CSS que ofrecen más o menos las mismas características.

CodePen

Codepen es una herramienta online consistente en un sitio web donde puedes desarrollar prototipos de interfaces de usuario y experimentos en la web. Es muy útil cuando quieres probar algún concepto nuevo, ya que no requiere ningún setup en particular y permite visualizar los resultados inmediatamente desde el propio navegador.

Básicamente te ofrece un espacio donde puedes escribir el código HTML CSS y JavaScript por separado y el propio codepen demuestra la salida en un panel independiente.

JSFiddle y CSSDeck

Se trata de alternativas similares a CodePen, en el sentido que permiten escribir y probar códigos online de una manera sencilla.

Extensiones como CSS Peeper o VisBug

Si quieres ir un poquito más allá te recomendamos experimentar con otras extensiones para trabajar con CSS. CSS Peeper está pensada para inspeccionar estilos de una manera más avanzada y extraer CSS de cualquier interfaz existente. Prueba también VisBug, una herramienta creada por el propio equipo de desarrollo de Google Chrome que ofrece numerosas utilidades para ajustar el diseño de cualquier página sin tener que tocar el código.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: