Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Clase 32 de 56 • Curso Definitivo de HTML y CSS

Resumen

¿Cómo usar el combinador hermano general en CSS?

¿Sabías que puedes aplicar estilos a ciertas etiquetas HTML que comparten el mismo nivel jerárquico? El combinador de hermano general en CSS es una herramienta increíblemente útil que te permite precisamente eso. Este sencillo selector te permite aplicar estilos a elementos siempre y cuando compartan un ancestro común. Sigamos explorando cómo funciona y cómo puedes implementarlo en tus proyectos web.

¿Qué es el combinador hermano general?

El combinador de hermano general, simbolizado por la tilde (~), es un selector CSS que aplica estilos a todos los elementos que comparten al menos un elemento previo en común en su jerarquía de documento. No te preocupes si no sabes cómo escribir este carácter en tu computadora; existen atajos de teclado específicos para distintas plataformas como Windows, Mac o Ubuntu.

¿Cómo implementarlo en HTML y CSS?

Aquí te mostraré un ejemplo práctico de cómo implementar el combinador hermano general en tu código HTML y CSS.

Paso 1: Crear el HTML

Primero, crea un documento HTML con algunas etiquetas que quieras estilizar. Vamos a utilizar etiquetas h2, h3, y p.

<div>
  <h2>Soy un h2</h2>
  <p>Soy una etiqueta p</p>
  <h2>Soy un h2</h2>
  <h3>Soy un h3</h3>
  <p>Soy una etiqueta p</p>
  <p>Soy un párrafo</p>
</div>

Paso 2: Estilizar usando CSS

Ahora, en tu archivo CSS, aplica el combinador de hermano general para cambiar el color de todas las etiquetas de párrafo (p) que tengan un h2 como hermano general.

h2 ~ p {
  color: red;
}

Este código CSS cambiará el color de todas las etiquetas de p que tengan un h2 como hermano general. ¡Increíble! A medida que agregas más párrafos a tu HTML, el estilo se aplicará automáticamente, siempre que compartan este ancestro.

¿Por qué es útil el combinador hermano general?

Este selector es extremadamente útil en situaciones donde necesitas mantener el estilo de elementos relacionados en tu interfaz de usuario. Por ejemplo, si deseas que todos los párrafos dentro de una sección se vean de una manera específica siempre que estén precedidos por un h2, el combinador de hermano general lo hace posible.

Conclusiones del uso del combinador

Al usar el combinador de hermano general, puedes:

Estilizar múltiples elementos de forma eficiente sin tener que nombrar todos los elementos individualmente.
Mantener un CSS limpio y legible.
Estructurar mejor tu código HTML para aplicar estilos dinámicos adaptables a tu contenido.

Te animo a implementar este potente selector en tus proyectos para lograr un diseño más organizado y consistente. Sigue explorando sus aplicaciones y descubre una forma más eficiente de manejo de estilos en hojas de estilo CSS.

Jose Caicedo

student•

Usando el código ASCII es posible obtener el símbolo (~) o utilizando la combinación de teclas alt + 126

Enrique Rabell Talamantes

student•

En linux o mac se puede hacer con alt+ñ ~

Gabriel Salazar Cortez

student•

muchas gracias!

Diego Cortez

student•

Si agregas un nuevo div y dentro de este div agregas otro párrafo, este nuevo párrafo ya no es un hermano general de las etiquetas anteriores:

Juan David Heredia Rozo

student•

pero si se pone un h2 en el segundo div, después de la etiqueta p, seguirían siendo hermanos generales???

Diego Cortez

student•

pero de los elementos dentro del div

Yeisson Stik Gutierrez Rivera

student•

general sibling combinator (~) separa dos selectores y coincide con el segundo elemento solo si sigue al primer elemento (aunque no necesariamente inmediatamente), y ambos son hijos del mismo elemento padre .

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

Sebastian Camilo Herrera Lopez

student•

Gracias por la informacion.

Sebastian Cifuentes

student•

Gracias!

Diego Alexander Delgado Maigual

student•

Es importante configurar correctamente el idioma del teclado para no tener inconvenientes

https://www.maestrodelacomputacion.net/como-reconocer-el-tipo-de-teclado/

Juan Christopher

student•

¡Gracias!

Daniela Díaz Graziani

student•

Genial 👌

Alejandra Valentina Acosta Cuéllar

student•

Como dato curioso, al símbolo (~) se le conoce también como virgulilla.

Wilbort Encomenderos Ruiz

student•

así es, únicamente se le conoce como virgulilla. tilde es otro símbolo si no me equivoco. otros le llaman tilde de la ñ.

Rubén Ernesto Aragón Gil

student•

salud

William Fernando Cañas Salas

student•

Una parte importante que no menciona el profesor es que se le aplica el estilo a los hermanos que se definan más abajo en el HTML. Es decir, si tuviéramos en este orden el HTML:

h2 p h3 h2 p

Y en vez de usar h2 ~ p, usamos h3 ~ p para cambiar el color de los párrafos. Los que cambiarían serían los hermanos de h3 que sean posteriores a esa etiqueta:

h2 p h3 h2 p [Sólo éste cambiaría de color]

Reinaldo Mendoza

student•

Lo que pasa es que en tu ejemplo todos cumplen la condicion que menciona el profesor, son hijos del mismo padre y estan en la misma linea, por eso se aplica el estilo.

Jorge Arroyo

student•

Esto me ayudo a entenderlo de mejor manera. ¡Gracias!

Edisson Francisco Pérez Pérez

student•

Me queda mas claro cuando los comparo:

Hermano adyacente Es todo aquel componente que se encuentra al lado o etiqueta inmediatamente siguiente de la etiqueta que quiero estilar.

  <h1>Soy un h1 </h1>
  <p> Soy un parrafo</p>

Hermano general Son todas aquellas etiquetas que se encuentran adentro de una etiqueta padre en este caso el div

	<div>
            <h1>Soy un h1 </h1>
            <p> Soy un parrafo</p>
            <h2>Soy un h2</h2>
            <h3>Soy un h3</h3>
        </div>

Sebastián Afanador Fontal

student•

Muchas gracias por el aporte, yo también no sabía cómo entenderlo adecuadamente

Jossie Steeven Quintero Giron

student•

Quien esta decidiendo todo es el primer h2, Si eliminan los demás h2 y dejan el primero. Esto es lo que pasa ..

Andres Condezo Monge

student•

Gracias por la observación.

Juan Christopher

student•

¡Gracias!

Ixchel Garcia

student•

Siempre y cuando los dos elementos (en este caso h2 y p) sean hermanos dentro de la estructura de nuestro archivo se aplicara el estilo determinado por el combinador. Es decir, si p pasa a ser hijo de un elemento que creemos despues de realizar el ejercicio hecho por Diego o de un elemento que ya hayamos implementado entonces pasa a ser HIJO de ese elemento, por lo cual ya no seria hermano de un elemento h2.

    <h2>Soy un H2</h2>
    <p>Soy un p hermano de h2</p>
    <h2>Soy un h2</h2>
    <h3>Soy un H3</h3>
    <div>
        <p>Soy un p hijo de div, por lo tanto no soy hermano de h2</p>
    </div>

Reinaldo Mendoza

student•

Jaja, era justo lo que yo iba a escribir, gracias por el aporte.

Hdhdh Hdhdh

student•

jajaja, muy bueno

Gaston Ezequiel Papa

student•

Hola, según lo que explica el profesor, la pirmera línea "Soy un p" tendría que figurar en color rojo. Ya que es hermano de la etiqueta 'h2' Haciendo los juegos de https://flukeout.github.io/ en el level 13 me di cuenta que NO es así, entonces volví a esta clase de "Hermano General" para ver nuevamente la explicación y entendí que le faltó decir "que sea hermano Y TENGA ARRIBA un 'h2'

emanuel

student•

Excelente aporte!

Erick Ricardo Mantilla Bolano

student•

Dato super IMPORTANTE que hizo falta y ademas lo explicaste muy bien, gracias por tu aporte.

Milton Josué Barrera Zepeda

student•

Recomiendo compararlos en un mismo index, para que ver las diferencias de una mejor forma

EDWIN VASQUEZ VALLE

student•

si es una muy buena idea amigo, gracias.

DARWIN JUAN CARLOS CATUNTA GARCIA

student•

Concuerdo con usted estimado, muchas gracias !! 😃

Delaney David Sarmiento Hernández

student•

"alt gr" + "+"

Julián Camacho

student•

~ efectivamente.

Lizeth Armijo

student•

gracias! ~

Jazmín Lizette Sánchez Neira

student•

Mis apuntes de la clase :)

Anthony Ismael Manotoa Moreno

student•

Si tienen activados varios idiomas en el teclado (en la configuración de Windows), pueden cambiar fácilmente de teclado pulsando alt + shift. Y a partir de ahí, en el teclado inglés, la ~ se consigue con shift + ` (está debajo de esc). Personalmente uso el teclado inglés para codear y el español para el copywriting.

Joel Dominguez Merino

student•

En esta clase vimos General Sibling Que es el combinador de Hermano General. Este tipo de combinador nos ayuda a seleccionar a los hermanos generales, es decir a los que comparten un mismo padre. Se representa mediante el siguiente simbolo ** ~ ** y se implementa asi.

Codigo HTML

<section>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Parrafo</p>
    </section>

Codigo CSS

/* Combinador: General Sibling (Hermano General) ~ */
/* Este combinador aplicara los estilos a los hermanos generales, sin importar la posicion, solo que sean hijos del mismo padre */

section > h3 ~ p {
  color: #1a1a2e;
  background-color: #d6e0f0;
  border-radius: 2px;
  font-size: 40px;
}

Resultado

Héctor Padilla

student•

Hola Joel, sí importa la posición. Todos los elementos <p>, que vienen después de <h3>, se les aplicará el estilo. El primer elemento <p> no sufre cambio alguno aun siendo hermanos. Saludos

    <section>
      <p>Etiqueta de Párrafo</p>
      <h3>Etiqueta H3</h3>
      <div>Etiqueta Div</div>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Párrafo</p>
      <h3>Etiqueta H3</h3>
      <p>Etiqueta de Párrafo</p>
    </section>

Carlos Ramos

student•

Clase 31 - Combinadores: General Sibling

¿Qué símbolo debemos de usar para utilizar el combinador hermano general o general sibling?

El símbolo de la virgulilla (~).

¿Cómo funciona el combinador hermano general o general sibling?

Este combinador nos permite agregar estilos a todos los elementos que tengan como hermano el elemento que escribamos en el selector.
Sintaxis:

h2 ~ p
{
   color: blue;
}

Como vemos en este ejemplo lo que estamos haciendo es darle estilos a todos los elementos <p> que tengan como hermano un elemento <h3>, sin importar si están alejados entre ellos.

Fabian Flores

student•

Notas de la clase

Eric López

student•

Gracias por el aporte de siempre.... las uso muchisimo para estudiar...

Abraham Castillo Valera

student•

Entonces... Si yo puedo especificar una etiqueta en especifico solo con los combinadores. ¿ Porque he de usar id o class ?...Si ya con los combinadores sería suficiente(Claro para una página web sencilla)

Giuseppe Ramirez

student•

Hola, Abraham. Esto te servirá para tener un correcto sistema de diseño y que tu código puede ser reutilizable, en el caso que necesites por ejemplo crear una nueva instancia, borrar otras, etc. Sea pequeña o sea grande la página. Además que id sirve también para JS.