Así como los selectores básicos en CSS nos ayudan a identificar y modificar elementos en nuestra página web, los selectores múltiples nos permiten aplicar un mismo estilo a más de un elemento o selector. En este post te presentamos los selectores múltiples en CSS y te enseñamos cómo usarlos.
Los selectores son una etiqueta de apertura en una regla CSS. Como parte inicial de la regla, determinan a qué elementos o atributos se les aplicarán los estilos de la regla. Además de los selectores básicos que te hemos presentado antes, existen selectores múltiples en CSS que nos ayudan a aplicar estilos a múltiples selectores.
Selector múltiple
Los selectores múltiples en CSS (o multiple element selector css ) son una lista de selectores separados por comas. Puedes crear esta lista con selectores del mismo tipo (elemento, clase, ID) o puedes crear una combinación de selectores básicos de CSS para aplicar el mismo estilo a distintos selectores. Así mismo, con este selector de atributos podemos modificar varios elementos al mismo tiempo , solo basta con empezar tu regla CSS con este listado de selectores para que los estilos se apliquen a todos los selectores de la lista.Te recomendamos leer nuestro post sobre los selectores básicos en CSS para refrescar tus conocimientos sobre qué tipos de selectores existen.
Selectores anidados
Como parte de los selectores múltiples en CSS, existen los selectores anidados. Estos son selectores que dependen de otro. Ten en cuenta que siempre que insertemos un selector anidado, el estilo que definamos en la regla se aplicará al último selector, el que se encuentra justo antes de la llave. A continuación te presentamos los cuatro selectores anidados de CSS:
Descendientes de cualquier nivel: div p
Al separar dos selectores por un espacio, CSS entiende que la propiedad o estilo de la regla se aplicará solo si el último selector es un descendiente del primero. En nuestro ejemplo, esto quiere decir que un estilo se aplicaría a todo párrafo que esté dentro de un div. En este selector, no importa si hay otros elementos dentro del div o si el p es un bisnieto de div y no un hijo directo. Mientras p esté dentro de div de algún modo, se aplicará el estilo.
Hijos directos: div > p
A diferencia del primer selector anidado, el selector de hijos directos requiere que el último selector cuelgue o dependa directamente del selector anterior. Este selector se escribe usando el símbolo de “mayor a”. En nuestro ejemplo, p debe ser un hijo directo de div. Esto requiere que p esté contenido directamente dentro de div y no de otro elemento dentro de div.
Hermanos adyacentes: div + p
Este selector anidado hace que el estilo o propiedad de la regla CSS se aplique solo al hermano directo del selector principal. Para esto, separamos los selectores por el símbolo de suma. En nuestro ejemplo, esto quiere decir que p debe ser el hermano justo después de div para que se le aplique la propiedad CSS. Este selector es muy útil si, por ejemplo, tenemos cuatro hermanos y div es el primero y queremos aplicar una propiedad de color rojo o red al segundo hermano p. En ese caso, se aplicará esta propiedad solo al segundo hermano, porque es el hermano adyacente a div.
Hermanos generales: div ~ p
¿Qué pasa si quieres que todos los hermanos después de div tengan la propiedad de color rojo? En este caso, utilizarías este selector anidado de CSS, el selector de hermanos generales.
Lo podemos insertar usando la tilde ~. Al separar dos selectores por este símbolo, le estamos diciendo a CSS que queremos aplicar una propiedad o estilo a todos los hermanos de nuestro selector. Si retomamos nuestro ejemplo anterior, la propiedad de color rojo se aplicaría a todos los hermanos de div que sean p. Si en nuestro ejemplo anterior todos los hermanos de div son p, entonces todos tendrían la propiedad de color rojo.
Ahora que conoces como aplicar estilo a varios elementos en CSS, ¡es momento de que pongas en práctica tus conocimientos sobre CSS! Si quieres practicar con los selectores múltiples en CSS de manera rápida y sencilla, te recomendamos la página web CodePen. En ella, podrás poner a prueba tus conocimientos creando hojas de código online sin tener que crear archivos en tu software de programación.
Si lo que quieres es continuar aprendiendo, tanto de forma teórica como práctica, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Allí, además de profundizar en los selectores múltiples en CSS, continuarás aprendiendo sobre el poderoso lenguaje que es CSS y lo utilizarás para estilizar tu propia página web, entre muchas herramientas y lenguajes más. ¡No te pierdas la oportunidad de seguir aprendiendo y matricúlate!
