Combinadores: General Sibling

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

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:

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

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

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

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

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]

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>

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

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>

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

“alt gr” + “+”

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’

Mis apuntes de la clase 😃

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.

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

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 <h2>, sin importar si están alejados entre ellos.

Notas de la clase

El h2 debe ir por encima de los p, porque si pones primero el p y luego el h2 ya no son hermanos generales 😃

HTML

<div>
    <h2>Soy un h2</h2>
    <p>Soy un p</p>
    <h2>Soy otro h2</h2>
    <h3>Soy un h3</h3>
    <p>Soy otro p</p>
  </div>

  <div>------------------</div>

  <div>
    <p>no soy hermano de los otros p</p>
  </div>

  <div>------------------</div>
  
  <div>
    <h2>soy un h2</h2>
    <p>no soy hermano de los otros p pero tengo un hermano h2</p>
  </div>

  <div>------------------</div>

  <div>
    <p>no soy hermano de los otros p pero tengo un hermano h2</p>
    <h2>soy un h2</h2>
  </div>

CSS

h2 ~ p {
color: red;
}

Resultado

Resumen:

• Hermano adyacente: h2+p:
  Agregale este estilo a las etiquetas “p” que tengan un “h2” justamente arriba de si mismas

• Hermano general: h2~p:
  Agregale este estilo a las etiquetas “p” que esten abajo de un “h2” (no importando si esta justamente arriba o si esta separado por otras etiquetas, la cosa es que tenga un "h2 arriba en html)

Para el General Sibling, en el ejemplo: aplica el estilo a todo hermano de etiqueta p que este en el mismo nivel de una etiqueta H2 y ademas que esta etiqueta H2 este previo a la etiqueta p. En la captura se puede observar que las dos primeras etiquetas p no aplica el estilo y esto es por que no existe un H2 Previo.

Si quieren profundizar más, les comparto este link sobre los Combinadores

Hermano general (General sibling)

div ~ p {
}

Donde:
div es la etiqueta padre
p es la etiqueta hijo

~
Entonces lo que sucede es que todas las etiquetas p que contenga div se le aplicará los cambios.

Aclaración:

HERMANOS GENERALES:

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

Anotaciones:

GENERAL SIBLING COMBINATOR

RESUME:
![](

con General Sibling h2 ~ p
vamos a modificar a todas las etiquetas de párrafo que tengan como hermano general a h2.
.
Es decir, se les aplica el mismo estilo siempre y cuando existan en la misma linea que una o varias etiquetas h2.

Combinadores: General Sibling

• Aplica estilos a los hermanos en general que tengan como hermano general “x” tag.
• No necesita ir seguido de la etiqueta h2 obligatoriamente

/*hermano general/general sibling*/
h2 ~ p {
	
}

<div>
	<h2>Soy un h2</h2>
	<p>soy un p</p>
	<h2>Soy un h2</h2>
	<h3>Soy un h2</h3>
	<p>soy un p</p>
</div>

Recuerden que para sacar la ultima <p> no es copy + paste, seleccionan la ultima <p> y ponen: Shift + alt + ↓ para que se duplique…

RESUMEN CLASE 31:
COMBINADORES:
GENERAL SIBLING

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div>
	   <h2>soy un h2</h2>
        <p>soy un p</p>
        <h2>soy un h2</h2>
        <h3>soy un h3</h3>
        <p>soy un p</p>
        <p>soy un p</p>
    </div>
</body>
</html>

CSS

h2 ~ p {
    color: red;
}

para teclado mac la forma de obtener el símbolo es con tecla option + ñ

Adajacent Sibling: Etiqueta que esté al mismo viel y que esté a su lado.
General Sibling: todas las etiquetas que estén al mismo nivel y que el contenedor sea el mismo.

Recuerden que para que sea un hermano general debe cumplirse lo siguiente:

• El hermano general precede a la etiqueta que se verá afectada por el CSS.
• Ambas etiquetas comparten el mismo padre.

https://developer.mozilla.org/es/docs/Web/CSS/General_sibling_combinator

La virgulilla (~) en el teclado español latino puede obtenerse presionando la tecla Alt Gr + 4, seguido de espacio.

En un teclado 60% con distribución en inglés, la virgulilla se hace con shift + fn + esc.
Saludos 😃

32.-Combinadores: General Sibling

Hermano general: como hermano general vamos a modificar todas las etiquetas de párrafo que tengan como hermano general un h2.

Va a aplicar el estilo siempre y cuando existan en la misma línea como hermanos esa etiqueta que estamos modificando.

Con el combinador de símbolo equivalente o tilde “~” estamos diciendo que las etiquetas de párrafo que estén en el mismo contenedor que las etiquetas de h2, sean de color rojo.
Como hemos visto todas estas etiquetas están en la misma contenedora div, asíque independientemente de la posición de los h2, si son cercanas o lejanas, mientras sean del mismo contenedor, siempre serán de color rojo.

que hago si con ningun codigo me sale la
" virguilla" ??

Ese símbolo me sale presionando la tecla chip y la tecla que en mi caso mi teclado la tiene debajo de la tecla de Esc, y el idioma del computador English State International Keyboard, presiono Ship y la tecla y luego barra espaciadora (~).

Hi, this is my aport 😃
HTML Code

CSS Code

Result

El Combinador Hermano General utiliza el símbolo de tilde ~ y se aplica el estilo de la etiqueta hermana seleccionada de forma general a las demás etiquetas
h2 ~ p {
color: red;
}
En este ejemplo todas las etiquetas párrafo adoptarán el estilo de las etiquetas hermanas h2

No entiendo la utilidad de esto si lo puedo hacer simplemente con la equeta p?

General Sibling Combinator ~
.
Ejm: H2 ~ P {…}
Aplica los estilos a todos los hermanos especificados ( P ) de otra etiqueta ( H2 ).
.
Es importante mantener una buena identación para evitar posibles confusiones.

Combinador Hermano general, en css vamos a utilizar un símbolo que se llama signo equivalente o tilde (~).

h2 ~ p {
  color: red;
}

Lo que estamos haciendo es un ok como hermano general vamos a modificar todas las etiquetas de párrafo que tengan como hermano general un h2. De forma general existen párrafos juntos con etiquetas h2 eso es lo que hace sibling en general va a aplicarle el estilo siempre y cuando existan a la misma línea como hermanos esa etiqueta que tu estas modificando con la tilde o el signo equivalencia.

Selecciona todos los <a> que siguen después de <div>

Los <a> que estén antes del <div> no serán tenidos en cuenta.

Excelente todo esto de los combinadores, es algo de lo que no tenía conocimiento. Estoy disfrutando al máximo este curso.

En windows en la distribucion de teclado ingles us puedes obtener este simbolo ~ con la combinacion

shift + `

pdt es la primera tecla escima del tab

En windows se escribe el simbolo

presionando simultaneamente alt gr +

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selectores</title> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
      <h2> este es un H2</h2>
      <p>Parrafo</p>
      <h2>es un H2</h2>
      <h3> es un H3</h3>
      <p>Parrafo</p> 
  </div>
</body>
</html>```

Combinador de hermano general ~ (General Sibling)

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si este está precedido inmediatamente o no por el primero y ambos comparten un padre común.

h2 ~ p {
  color: red;
}

Me di cuenta de que también el párrafo anterior se cuenta como hermano.

Combinador hermano general.

La virgulilla (~), para ciertos teclados, sale con la suma de AltGr + el botón (asterisco, suma, cierre corchete), ese que está cerca al botón Enter.

para los que no les sirva ningun codigo para sacar la " ~ "
como a mi , que intente de todo lo que sale en internet y no funcionaba …

la solucion es
AltGr + " + "

pero no el + de los numeros si no el + donde esta el *

• Hermano general: Aplica el estilo siempre y cuando coincida una p con un h2 en el mismo contenedor*/

h2 ~ p {
color: red;
} 

En mi LAPTOP yo saque el signo presionando la tecla alt gr + la tecla que contenia el simbolo ~ de hehco esta junto con * y +

ALT+ 126= ~~~~

En esta lección, exploraremos el uso del combinador “hermano general” (General Sibling) en CSS. Este combinador nos permite aplicar estilos a elementos que comparten el mismo contenedor padre y que son seguidos por otro tipo de elemento específico. A continuación, te presento un ejemplo práctico.

Estructura HTML:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Combinador Hermano General</title>
</head>
<body>
	<div>
		<h2>Soy un H2</h2>
		<p>Soy una etiqueta p</p>
		<h3>Soy un H3</h3>
		<h2>Soy un H2</h2>
		<p>Soy una etiqueta p</p>
	</div>
</body>
</html>

Estilos CSS con el Combinador Hermano General:

/* Estilo para las etiquetas de párrafo seguidas por un H2 (hermano general) */
p ~ h2 {
	color: red;
}

Explicación:

En este ejemplo, utilizamos el combinador ~, que representa al hermano general. La regla CSS p ~ h2 indica que queremos aplicar un estilo a todas las etiquetas H2 que siguen a una etiqueta de párrafo (p) dentro del mismo contenedor padre.

En el resultado, veremos que los H2 que siguen a las etiquetas de párrafo se colorearán de rojo, mientras que los H2 que no cumplen esta condición permanecerán con sus estilos originales.

Conclusión:

El combinador “hermano general” es útil cuando queremos seleccionar elementos específicos que siguen a otro tipo de elemento dentro del mismo contenedor. Esto nos brinda flexibilidad al aplicar estilos a elementos que comparten un contexto común. En la siguiente clase, exploraremos más combinadores y sus aplicaciones. ¡Hasta la próxima!

El combinador de hermanos generales en CSS, denotado por el símbolo ~, selecciona todos los elementos hermanos que comparten el mismo padre y que siguen al primer elemento especificado, sin importar su proximidad directa.

Aquí tienes un ejemplo de cómo puedes utilizar el combinador de hermanos generales:

css
Copy code
h2 ~ p {
font-style: italic;
}
En este caso, la regla CSS selecciona todos los elementos <p> que son hermanos generales (es decir, comparten el mismo padre) de un elemento <h2>, y les aplica un estilo de texto en cursiva.

Ejemplo en HTML:

html
Copy code
<h2>Encabezado 1</h2>
<p>Este párrafo será cursiva.</p>
<p>Este párrafo también será cursiva.</p>
Ambos párrafos <p> en este caso serán afectados por la regla CSS, ya que son hermanos generales del <h2>.

Es importante destacar que, a diferencia del combinador de hermanos adyacentes (+), el combinador de hermanos generales (~) selecciona todos los elementos hermanos que cumplen con la condición, no solo el siguiente. Además, el orden de los elementos en el código HTML no afecta la selección; solo importa que compartan el mismo padre y que el primer elemento preceda al segundo especificado en el selector.

Buenas tardes, note que si le aplicara el estilo a los hermanos generales de h3 solo aplicaria a los hermanos que van despues de la etiqueta h3 y no a los de antes.

Hola,
Aclaración:
El combinador de hermanos generales (~) separa dos selectores y hace coincidir todas las iteraciones del segundo elemento, que siguen al primer elemento (aunque no necesariamente inmediatamente) y son hijos del mismo elemento padre.

Es fundamental entender el concepto que “siguen”.

Por ej., no funcionaría si el segundo elemento está antes del primer elemento, aunque los dos sean hijos del mismo elemento padre.

Para la virgulilla ALT GR + 4 con teclado español

En Mac para sacarlo debes de usar “option” + “+” = ~

~Como escribir el simbolo de la virgulilla en Linux ~

Parece que todo mundo, ha escrito sus tutoriales en base a Windows y MacOS y nadie ha publicado algo para los compañeros linuxeros

Escribir el simbolo es simple, pulsamos AltGr y sin soltar, en mi caso con el teclado, ESPAÑOL, pulsamos el simbolo de +, el que esta al lado, de la tecla enter, y listo, lo tenemos escrito

Asegurense de que su teclado, de igual forma, este en español, o sea latinoamericano

Asi lo entendi, espero que ayude:
El general sibling aplica las modificaciones a los elementos hermanos que indiquemos mientras ambos existan como hermanos dentro de un contenedor padre, las modificaciones serán realizadas si y solo si existen los dos dentro del mismo contenedor (el hermano de “referencia” y el que va a ser modificado). Si uno de los dos no existe, nada será aplicado.

El nombre correcto del carácter es virgulilla, para el idioma español, tiene un objetivo relacionado a un aspecto de la pronunciación. En este caso aplicados solo al sibling general:

EJ: h2 ~ p => ; tomara todos los hermanos, sin importar si son cercanos o no.

Los hermanos generales es que estén debajo en el mismo contenedor, así hayan otros elementos abajo también

.

Cuando vean la virgulilla (~) en CSS recuerden cuando abren su cartuchera en el colegio…todos los útiles dentro son hermanos sin excepción 😅

Para los usuarios de Linux Ubuntu, de igual manera que windows, con la hotkey combination: Shift + tecla localizada numeral (~) en la parte izquierda del “1”

Mientras observaba la clase, lo que obtuve es un error interesante que seguramente les llegue a pasar, cuando estan determinando una clase y quieran aplicar el combinador del hermano general, chequen bien que esa clase este bien escrita y puedan ver el cambio.
Porque si no, puede suceder esto mientras hagan esto:

</div class="generalSibling">
		<h2>Soy un h2</h2>
		<p>Soy un p</p>
		<h2>Soy un h2</h2>
		<h3>Soy un h3</h3>
		<p>Soy un p</p>
		<p>Soy un p</p>
	</div>

~ =  ALT GR + tecla *+~ 
```(diagonal izq al enter).
Teclado latinoamericano

Este link súper recomendado para usar los símbolos en tu teclado. (sin necesidad de ALT +).

También puedes abrir el character map que viene por defecto en Windows.

La tecla AltGr te permite acceder a esta tercera función.

En Windows 11 es ALT GR + 4 sin soltar presionas el símbolo de virgulilla

h2 ~ p { (modifica todos los párrafos que "vengan" de un h2)

Hermano general o General sibling (usamos la virgulilla o también llamado signo equivalente ~

Para usar un hermano general sigue vigente la regla del hermano cercano de que para afectar a la etiquta <p> debe estar por debajo de <h2>, si un <p> esta arriba del primer <h2> no se vera modificado su color aunque este en el mismo nivel

<style>
        p ~ h1 {
            color: red;
        }
    </style>
</head>
<body>
    <p>hola</p>
    <h1>h1</h1>
    <p>p</p>
    <h1>h1</h1>
    <p>p</p>
    <h1>h1</h1>
</body>

El General Sibling o hermano general nos permite de que cualquier etiqueta <p>(en este caso) que este en el mimo nivel (o tabulador) de <etiqueta> se veran afectadas en los estilos asignados, pero cualquiel <p> que no este al mimo nivel de <etiqueta> no se veran afectados

<etiqueta> ~ p 
{
.......
}

General de hermanos

• Es similar al adyacente, pero esta vez no solo selecciona al de abajo, sino a cualquiera que esté al mismo nivel (abajo de el), es decir, a sus hermanos.

1 ero para los que están en Windows solo cambien el idioma del teclado a ingles y aprieten shift + la primer tecla jaja sin ser esc la de abajo… y con respecto a “hermano general” seria mejor la explicación que se aplica general y no por cercanía, a no ser que yo desconozca una variable de la regla (que es probable 😃

Para sacar ~ en linux se hace con

alt + ñ

En Windows Alt + 126 y sale ~

alt Gr y el signo + asi pude hacerlo yo

Importante: Si hubiese un <p> antes del <h2>, a esa etiqueta no le aplicaria el combinador. Solo se aplican a los que vienen inmediatamente despues 😃