Combinadores css: ¿Cómo seleccionar varias etiqueta en html?
Los combinadores css son símbolos que permiten combinar selectores para aplicar reglas CSS a elementos que cumplen ciertas condiciones de relación.
En este tutorial, exploraré los combinadores que posibilitan la utilización de varios tipos de selectores para la selección de elementos. Esta capacidad de selección se fundamenta en la relación entre los elementos que coinciden con los diversos tipos de selectores especificados.
¿Cuál es la función del combinador de hermanos adyacentes (+) en CSS y cómo se utiliza para seleccionar elementos específicos en HTML?
Combinador de hermanos adyacentes (+): Selecciona el elemento que sigue inmediatamente a otro elemento y ambos tienen el mismo padre. Ejemplo: h2 + p selecciona el primer párrafo que sigue a un encabezado de nivel 2. Esto aplicaría un estilo de línea inferior, y un color al primer parrafo que sigue inmediatamente a un encabezado de nivel 2.
h2 + p {
text-decoration: underline;
color: brown;
}
<section>
<h2>My title h2</h2>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit.</p>
<h2>My title h2</h2>
<p>Lorem ipsum dolor</p>
</section>
¿Cómo funciona el combinador de hermanos generales (~) en CSS y qué relación establece entre elementos para su selección?
Combinador de hermanos generales (~): Selecciona todos los elementos que siguen a otro elemento y ambos tienen el mismo padre. Ejemplo: h2 ~ p selecciona todos los elementos p que están después de un encabezado de nivel 2. Esto cambiará el color y añade una línea inferior de todos los elementos p que están después de un h2.
h2 ~ p {
text-decoration: underline;
color: brown;
}
<section>
<h2>My title h2</h2>
<p>Lorem ipsum dolor sit</p>
<p>Lorem ipsum dolor sit.</p>
<hr />
<h3>My title h3</h3>
<p>Lorem ipsum dolor</p>
</section>
¿Cuál es la finalidad del combinador de hijos directos (>) en CSS y cómo se emplea para elegir elementos específicos en la jerarquía estructural HTML?
Combinador de hijos directos (>): Selecciona los elementos que son hijos directos de otro elemento. Ejemplo: h2 > span selecciona los elementos span que son hijos directos de un h2. Esto establece estilos para todos los elementos span que son hijos directos de un encabezado de tipo h2.
span {
background-color: whitesmoke;
}
h2 > span {
background-color: brown;
}
<h2>
<span
>Span #1, dentro del h2.
<span>Span #2, dentro del span que está en el h2.</span>
</span>
</h2>
<span>Span #3, no está dentro del h2.</span>
¿Cómo se utiliza el combinador de descendientes (espacio) en CSS para seleccionar elementos que están anidados dentro de otros?
Combinador de descendientes (espacio): Selecciona los elementos que son descendientes de otro elemento, es decir, que están dentro de él, aunque no sean hijos directos. Ejemplo: h2 span selecciona todos los elementos span que están dentro de un elemento h2 y aplicaría estilos. Esto aplicaría estilos a todos los elementos span que están dentro de un encabezado de tipo h2.
span {
background-color: whitesmoke;
}
h2 span {
background-color: brown;
}
<h2>
<span>
Span #1
<span>Span #2</span>
</span>
</h2>
<span>Span #3, no está dentro del h2.</span>
Hemos visto lo poderoso que son los combinadores css, mira estas combinaciones avanzadas.
Estos selectores estan compuestos por el combinador de hermanos adyacentes (+), el de hijos directos (>), variables css, la pseudoclase :is() y el selector universal (*).
.flow > * + * {
margin-block-start: var(--flow-space, 1em);
}
Este código CSS lo que hace es aplicar un margen en la dirección del bloque a los elementos que son hijos directos de un elemento con la clase flow y que no son el primer hijo. El valor del margen se toma de la variable —flow-space, con un valor predeterminado de 1em si la variable no está definida.
.prose :is(h2 + *, h3 + *, h4 + *) {
--flow-space: var(--space-s);
}
Este código CSS utiliza la pseudo-clase :is() para aplicar estilos a elementos que son hijos directos de elementos <h2>, <h3>, o <h4>.
Te dejo el artículo ariginal donde profundizan más.
Puedes ver lo poderoso que es css y que con pocas líneas de código se puede hacer mucho.