Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos
Contenido del curso
Jose Caicedo
Enrique Rabell Talamantes
Gabriel Salazar Cortez
Diego Cortez
Juan David Heredia Rozo
Diego Cortez
Yeisson Stik Gutierrez Rivera
Sebastian Camilo Herrera Lopez
Sebastian Cifuentes
Diego Alexander Delgado Maigual
Juan Christopher
Daniela Díaz Graziani
Alejandra Valentina Acosta Cuéllar
Wilbort Encomenderos Ruiz
Rubén Ernesto Aragón Gil
William Fernando Cañas Salas
Reinaldo Mendoza
Jorge Arroyo
Edisson Francisco Pérez Pérez
Sebastián Afanador Fontal
Jossie Steeven Quintero Giron
Andres Condezo Monge
Juan Christopher
Ixchel Garcia
Reinaldo Mendoza
Hdhdh Hdhdh
Gaston Ezequiel Papa
emanuel
Erick Ricardo Mantilla Bolano
Milton Josué Barrera Zepeda
EDWIN VASQUEZ VALLE
DARWIN JUAN CARLOS CATUNTA GARCIA
Delaney David Sarmiento Hernández
Julián Camacho
Lizeth Armijo
Jazmín Lizette Sánchez Neira
Anthony Ismael Manotoa Moreno
Joel Dominguez Merino
Héctor Alonso Padilla Ramírez
Carlos Ramos
Fabian Flores
Eric López
Abraham Castillo Valera
Giuseppe Ramirez
Josue Granados
Cristian Ramos
Carlos Eduardo Gomez García
Cristian Ramos
Giselle Desiree Boyer Jimenez
CRISTIAN BARBERO PÉREZ
Sergio Andrés Bolaños Penagos
Usando el código ASCII es posible obtener el símbolo (~) o utilizando la combinación de teclas alt + 126
En linux o mac se puede hacer con alt+ñ ~
muchas gracias!
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:
pero si se pone un h2 en el segundo div, después de la etiqueta p, seguirían siendo hermanos generales???
pero de los elementos dentro del div
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
Gracias por la informacion.
Gracias!
Es importante configurar correctamente el idioma del teclado para no tener inconvenientes
https://www.maestrodelacomputacion.net/como-reconocer-el-tipo-de-teclado/
¡Gracias!
Genial 👌
Como dato curioso, al símbolo (~) se le conoce también como virgulilla.
así es, únicamente se le conoce como virgulilla. tilde es otro símbolo si no me equivoco. otros le llaman tilde de la ñ.
salud
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]
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.
Esto me ayudo a entenderlo de mejor manera. ¡Gracias!
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>
Muchas gracias por el aporte, yo también no sabía cómo entenderlo adecuadamente
Quien esta decidiendo todo es el primer h2, Si eliminan los demás h2 y dejan el primero. Esto es lo que pasa ..
Gracias por la observación.
¡Gracias!
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>
Jaja, era justo lo que yo iba a escribir, gracias por el aporte.
jajaja, muy bueno
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'
Excelente aporte!
Dato super IMPORTANTE que hizo falta y ademas lo explicaste muy bien, gracias por tu aporte.
Recomiendo compararlos en un mismo index, para que ver las diferencias de una mejor forma
si es una muy buena idea amigo, gracias.
Concuerdo con usted estimado, muchas gracias !! 😃
"alt gr" + "+"
~ efectivamente.
gracias! ~
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
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>
Clase 31 - Combinadores: General Sibling
¿Qué símbolo debemos de usar para utilizar el combinador hermano general o general sibling?
¿Cómo funciona el combinador hermano general o general sibling?
h2 ~ p { color: blue; }
Notas de la clase
Gracias por el aporte de siempre.... las uso muchisimo para estudiar...
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)
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.
De hecho los combinadores "combinan" con todo. Tu puedes tener lo siguiente:
.a-class ~ .another-class { ... }
pregunta, esto solo funciona dentro de DIVS ? SECTION ? ARTICLE ? o fuera de ellos tambien ?
Funciona con cualquier etiqueta 👀
entiendo,gracias
si en este ejemplo tenemos un estilo para h2 ~ p y otro diferente para h3 ~ p, tomará el último colocado en el css, correcto?
Efectivamente, a no ser que coloques más selectores junto a ellos y uno tenga mayor especificidad que el otro
Así es, ya que estará más abajo y reescribirá el código
