Diseñar el texto y el contenido de un sitio web con código HTML es solo una "parte" de la construcción la interfaz de un sitio web. Otra gran parte de este proceso es la creación del estilo visual, que se rige por las reglas de CSS.
Siempre que creamos un nuevo sitio web o realizamos cambios importantes en el diseño de uno existente, inevitablemente queremos que partes específicas de nuestro sitio web se vean de cierta manera. Para hacer esto, es importante comprender cómo utilizar los distintos Combinadores CSS, como el selector de descendientes de CSS. Este combinador de CSS permite que grandes secciones de un sitio web reciban los mismos cambios de estilo a la vez.
¿Qué es un selector descendiente de CSS?
El selector de descendientes de CSS es uno de los cuatro combinadores de CSS diferentes. Al agregar un solo espacio () entre dos selectores, los mismos elementos de estilo también se aplicarán al segundo selector, dado que los descendientes comparten el mismo primer selector.
Para comprender un selector de descendientes de CSS, primero debe
entender los selectores de CSS. La mejor manera de describir un selector es que es un operador CSS que identifica la parte de HTML que está intentando aplicar estilo. Se llama selector porque "selecciona" cualquier parte de HTML que comparta el mismo operador que el padre CSS.Ejemplos comunes de tales operadores son:
div
Esta es una etiqueta que define una sección de HTML, que puede incluir cosas como párrafos y contenido, o:
li
que es una lista ordenada. Otra etiqueta similar es:
ul
Esto crea una lista desordenada. Los patrones más complejos también se denominan selectores. En pocas palabras, un selector de descendientes de CSS le dice a un sitio web cómo debe verse cuando un selector está "anidado" debajo de un ancestro común.
El primer selector se convierte en el padre de CSS, o el selector "ancestro", y el segundo selector se convierte en el descendiente. Piense en cómo funciona un directorio de archivos: el padre CSS es como una carpeta que contiene otras carpetas, que pueden contener sus propias carpetas.
De los cuatro combinadores, el único que selecciona todo lo que está anidado debajo de un padre CSS específico es el selector de descendientes CSS. Hay otros tres combinadores.
- El selector secundario (">" en lugar de un solo espacio) solo selecciona elementos a los que hace referencia el primer selector en un combinador. Si el primer selector es (div) y el segundo selector es (p), solo se selecciona (p) siempre que tenga (div) como ancestro. Si se crea un párrafo en una nueva (sección), incluso si está en la misma (div), las reglas de estilo no se mantienen.
- El selector de hermanos adyacente ("+" en lugar de un solo espacio) solo selecciona el elemento que está más cerca del segundo selector en el combinador. Si el primer selector es (div) y el segundo selector es (p), se selecciona el primer elemento que usa (p) pero no (div).
- El selector general de hermanos ("~" en lugar de un solo espacio) selecciona todos los elementos excepto aquellos a los que hace referencia el segundo selector. Si el primer selector es (div) y el segundo selector es (p), se seleccionarán todos los elementos que no sean (p).
¿Qué aspecto tiene un selector de descendientes de CSS?
En el siguiente ejemplo de dos selectores descendientes CSS diferentes que operan en paralelo, (div) es el primer selector en el primer combinador, mientras que (ul) es el primer selector en el segundo combinador. En ambos selectores descendientes de CSS, (p) se utiliza como segundo selector.
Los elementos de estilo difieren entre (div) y (ul), pero (p) claramente lleva los rasgos de su padre CSS en ambos casos.
¿Por qué utilizar un selector de descendientes de CSS?
Para comprender la importancia del selector de descendientes de CSS, es valioso comprender primero los selectores anidados de CSS.
Por lo general, queremos que se apliquen ciertas reglas de estilo a todo un sitio web, como el tamaño o la fuente específicos que todo el texto del párrafo (p) utiliza de forma predeterminada. Del mismo modo, HTML puede comenzar a verse desordenado si esas reglas de estilo se aplican para cada párrafo individual en lugar de para todo el sitio web.
CSS anidado es posible mediante el uso de combinadores de CSS como el selector de descendientes de CSS. Al "anidar" CSS debajo de un selector principal, es posible decirle a un sitio web de manera rápida y eficiente cómo se supone que debe verse un selector específico en cada escenario al que se hace referencia al padre CSS.
El uso de un selector de CSS anidado nos permite aplicar las mismas reglas para diseñar varias secciones de un sitio a la vez, lo que nos permite arreglárnoslas con menos trabajo y al mismo tiempo mantener nuestro HTML limpio y prístino.