Qué son los selectores CSS y qué tipos existen

Si estás aprendiendo desarrollo web, una de las lecciones más importantes que debes aprender es qué son los selectores CSS y qué tipos existen, ya que esto te permitirá dar estilo a los documentos HTML y establecer su disposición en pantalla.

¡Empecemos!

Introducción: ¿qué son HTML y CSS?

Antes de empezar con los selectores, conviene que tengas claros algunos conceptos. En primer lugar, HTML es el lenguaje mediante el cual se construyen las páginas web. Gracias a él, podrás crear documentos con extensión .html que podrán ser visualizados por un navegador web. HTML se compone de etiquetas con las que el programador define el contenido que tendrá la web. Si todavía no conoces este lenguaje, te recomiendo que antes de seguir con este artículo, conozcas la estructura básica de HTML y el listado de etiquetas HTML existentes.

En segundo lugar, debes saber que CSS es el lenguaje con el que se define el estilo y el aspecto visual de cualquier página web. Mediante CSS podemos establecer colores, tipografías, tamaños, espacios, la ubicación de los elementos en la web, etc. Para ello, CSS emplea lo que se conocen como reglas.

Las reglas CSS son fragmentos de código en los que se asignan unas propiedades de estilo a uno o varios elementos HTML definidos por el programador. En este artículo no vamos a centrarnos en las propiedades de estilo que podemos aplicar, sino en los selectores CSS, que son las estructuras que nos permiten asignar las propiedades a los elementos HTML. A continuación te explico estas cuestiones con mayor profundidad.

¿Qué son los selectores en CSS?

Como te he mencionado previamente, CSS es un lenguaje que se compone de estructuras de programación que se denominan reglas CSS. Un ejemplo de regla CSS podría ser el siguiente, mediante la cual definimos que la tipografía del elemento <body> del documento HTML será Sans Serif.

body {
     font-family: sans-serif;
}

Las reglas se componen principalmente de dos elementos: selectores y declaraciones. En este caso, el selector sería «body» y la declaración «font-family: sans-serif».

A continuación te explico los tipos principales de selectores CSS que existen. Gracias a ellos podrás comenzar a dar estilo a tus páginas web.

Tipos de Selectores CSS

Selector universal *

El selector universal (*) es aquel que sirve para apuntar a todos los elementos HTML del documento. Por ejemplo, podríamos crear una regla en la que se defina que el tamaño de fuente de todos los elementos HTML del documento sea de 12px:

* {
     font-size: 12px;
}

Si estás comenzando a aprender CSS, puede que este selector te parezca muy útil. Sin embargo, te recomiendo que lo utilices lo menos posible, ya que puede darte problemas a medida que aumentan tus líneas de código CSS. En su lugar, es más adecuado que emplees selectores más específicos.

Selectores de etiqueta

Los selectores de etiqueta, también denominados selectores de tipo, son aquellos en los que se indica el nombre de la etiqueta HTML a la que se le asignará una propiedad CSS. Por ejemplo, podemos aplicar un tamaño de un 1 rem y un color azul a todos los encabezados h2 de nuestro documento empleando la siguiente regla:

h2 {
     font-size: 1rem;
     color: blue; 
}

Selectores de ID y de clase

Como ya sabes, los elementos HTML pueden tener clases o identificadores, las cuales se definen dentro de las etiquetas HTML mediante las estructuras class=»nombre-clase» e id=»nombre-id». La utilidad principal de las clases e identificadores es la de posibilitar la selección de elementos concretos de HTML mediante CSS. Pongamos un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .mi-parrafo {
            font-size: 1rem;
            font-family: 'Times New Roman', Times, serif;
        }
        #parrafo-1 {
            color: black;
        }
        #parrafo-2 {
            color: green;
        }
        #parrafo-3 {
            color: yellow;
        }
    </style>
</head>
<body>
    <p id="parrafo-1" class="mi-parrafo"></p>
    <p id="parrafo-2" class="mi-parrafo"></p>
    <p id="parrafo-3" class="mi-parrafo"></p>

</body>
</html>

En el anterior ejemplo, hemos asignado a todos los párrafos la clase mi-parrafo. A continuación, hemos definido mediante CSS que todos los elementos HTML que tengan esta clase tendrán un tamaño de 1 rem y un tipo de letra Times New Roman. Como se puede observar, el selector de clase se establece con la nomenclatura .nombre-clase, es decir, poniendo un punto y a continuación el nombre de la clase.

Por otro lado, hemos asignado a cada uno de los párrafos un identificador. De esta manera, hemos indicado mediante CSS que el color de fuente del primer párrafo será negro, el del segundo verde y el del tercero azul. En este caso, el selector de id se establece con la sintaxis #nombre-id, es decir, poniendo una almohadilla y a continuación el nombre del identificador.

Selector de Atributo

Este tipo de selectores permiten apuntar a elementos HTML que contengan un determinado atributo. Se definen, como mínimo, definiendo entre corchetes el nombre del atributo al que queremos señalar, con la nomenclatura [nombre-atributo]. Pongamos un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        [href]{
            text-decoration: none;
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://carontestudio.com/">Enlace 1</a>
    <a href="https://carontestudio.com/blog/">Enlace 2</a>
    <a href="https://carontestudio.com/diseno-web/diseno-web-vitoria">Enlace 3</a>
</body>
</html>

En el ejemplo anterior, hemos establecido que todos los elementos con el atributo «href» tengan un color naranja y no tengan una decoración predefinida. De esta manera, los tres enlaces que hemos definido adoptarían dichos estilos, ya que todos ellos tienen el atributo href.

Si quieres aprender más sobre este tipo de atributos, te recomendamos visitar la siguiente página. Por otro lado, si quieres conocer todos los atributos existentes en HTML, te recomendamos nuestro artículo sobre dicha temática.

¿Esto es todo?

Hasta ahora hemos visto qué son los selectores CSS y qué tipos existen. Sin embargo, por fortuna esto no es todo. Si estás comenzando a programar en CSS, este tipo de selectores son más que suficientes para empezar a practicar.

Una vez los tengas controlados, podrás avanzar en la temática y emplear selectores más complejos y apuntar a elementos HTML que sean hijos o hermanos de otros, crear selectores compuestos, combinar diferentes tipos de selectores, etc.

Estate atento, porque próximamente publicaremos nuevo contenido más avanzado sobre la temática.

Conclusiones

Los selectores CSS son la base para construir reglas de estilo que definan la estética y disposición de los elementos de una web. Como hemos visto, los selectores CSS principales son el universal, los de etiquetas, clases, identificadores y atributos. Gracias a ellos ya puedes comenzar a crear tus primeras reglas CSS.

Te animo a practicar y a descubrir nuestra sección de artículos sobre programación web, donde podrás encontrar una gran cantidad de contenido que será útil en tu aprendizaje.

¡Saludos y hasta la próxima!

Caronte Studio