Combinadores: Adjacent Siblings (combinators)

El combinador hermano adyacente ( +) separa dos selectores y coincide con el segundo elemento solo si sigue inmediatamente al primer elemento, y ambos son hijos del mismo padre element.

CSS selector cheat sheet!

**Recomiendo tener su editor dividido, ya que se hace más fácil cuando miras la estructura HTML mientras le das estilos.
**

Woow amigos, esto no tiene nada que ver con la clase, pero ya pude hacer algo así hasta ahora:

h2 + p{
	color: red;
}

Traducción
.
Señor navegador, por favor colócame estos estilos:

color: red;

A TODOS todos elemento p (parrafo) que sean hermanos adjacente de TODOS los elementos h2
.
Atentamente,
.
El Front-end Developer

No puedo dejar de compartirles esta joyita!
![](

Adyacente: Adyacente, del latín adiăcens, es un adjetivo utilizado para nombrar a lo que se ubica en las cercanías de algún objeto o cosa. Dícese que lo adyacente es lo que está al lado, lo contiguo o aledaño.

Por si alguien le sirve mis apuntes 😃

Resumen

Me gustó el juego recomendado, https://flukeout.github.io/ ayuda a aprender las combinaciones y la forma en que se deben hacer…

MIS APUNTES

RESUMEN:

Especificidad: Capacidad que se le otorga a un selector de CSS para aplicar estilos, mientras mayor nivel de especificidad tenga el selector, será más relevante para el navegador.

Herencia: Característica que cumplen algunas propiedades de CSS, para así heredar estilos de etiquetas padres a etiquetas hijos.

NOTA: No todas las propiedades de CSS se heredan.

Clase 30 - Combinadores: Adjacent Siblings (combinators)

¿Qué son los combinadores en CSS?

• Es una característica de CSS que nos permite combinar varios selectores para crear un mayor especificidad.

¿Cuáles son los combinadores más comunes que hay en CSS?

• Hermano adyacente o cercano - Adjacent sibling.
• Hermano general - General sibling.
• Hijo - child.
• Descendiente - Descendant.

¿Los combinadores nos ayudan a evitar el sobreuso de las clases y id’s?

• Sí.

¿Qué símbolo debemos usar para utilizar el hermano cercano o adjacent sibling?

• El símbolo de más (+).

¿Cómo funciona el combinador hermano adyacente o adjacent sibling?

• Este combinador nos permite agregar estilos a un elemento que tenga seguido de él el elemento que le digamos en el selector.
• Sintaxis.

h2 + p
{
   color: red;
}

• En este ejemplo lo que estamos haciendo es dándole a los elementos <p> que estén seguidos de un elemento <h2> el color rojo en la fuente.

#off-topic esta pregunta viene por fuera del tema pero me di cuenta de algo viendo el VS Code del profesor.
¿Cómo reducen el espaciado por defecto cuando se da “tab” en las líneas de código?

Los combinadores en CSS, que esto nos va a ayudar a tener una especificidad mucho más certera. Tenemos 4 opciones de combinadores entre las más importantes. Al momento de generar estas combinaciones vamos a tener una especificidad mucho mas alta que nos va a ayudar a evitar tener id por ejemplo o algún otro tipo de id etiqueta etiqueta etiqueta. Con esto podemos ser un poco más específicos sin tener un id, y nos puede ayudar mucho para la parte de la especificidad.
Estos 4 son los hermanos adyacentes o cercanos, los hermanos generales, los hijos y los descendientes.

Adjacent:
Traducción: Adyacente
Fotónica: uh-jei-snt

Siblings:
Traducción: Hermano/a
Fotónica: si-bluhngz

Combinators

they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document. These are:

• Descendant combinator
• Child combinator
• Adjacent sibling combinator
• General sibling combinator

Adjacent sibling

The adjacent sibling selector (+) is placed between two CSS selectors. It matches only those elements matched by the second selector that is the next sibling element of the first selector. For example, to select all <img> elements that are immediately preceded by a <p> element:

p + img

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators

Resumen:
Hermano cercano, es una forma de modifciar etiquetas usando el signo + y solo modificara a los que esten cerca de ella.

🐱‍💻 Los combinadores permiten aplicar una selección por contexto entre varios selectores.

Anotaciones:

Notas de la clase

Combinadores: (combinators)

Nos permiten combinar múltiples selectores y crear una mayor especificidad.

Hermano adyacente o cercano (Adjacent sibling)

div + p {
	...
}

Hermano general (General sibling)

div ~ p {
	...
}

Hijo (Child)

div > p {
	...
}

Descendiente (Descendant)

div p {
	...
}

Básicamente el hermano cercano aplica los cambios al elemento que está justo debajo del primer elemento que se manda llamar

Hermano adyacente (Adjacent sibling)

div + p {
}

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

+
Entonces lo que sucede es que todas las etiquetas p cercanas a div se le aplicará los cambios.

hay algo que pienso desde hace algún tiempo y no se si sea así.
Creo que el código se lee de derecha a izquierda.

h2 + p {
color: red;
}

se aplican las propiedades de la regla a las etiquetas p que estén junto a una etiqueta h2.

ustedes que son más conocedores del tema me pueden orientar?

Que buen curso es como hacer magia con css

CSS combinadores
Ejemplohermano adyacente

Es una maravilla cada vez quedo mas convencido que estoy aprendiendo ojala todos pudieran experimentar y tener un futuro empleo gracias profe Granda aprendan muchachos no pares de aprender conj platzi si hay futuro

Cuando vean un signo más (+) en CSS, piensen en que están comiendo un rico chifa y les traen su segundo con su sopa wantan, dos platos adyacentes 😅

ADJACENT SIBLING COMBINATOR

quizas lo use sin siquiera entenderlo, pero en mis practicas de Pseudoclases legue a usarlo asi (ignoren los #, ya entendi que es mala practica, eso fue antes de estas clases - que fue la pasada):

#check:checked + div{
    background-color: darkorange;
}
#check:checked + div::first-letter{
    font-size: xx-large;
}
#radio:checked + label{
    background-color: #78fa99;
}
#check1:checked + label{
    background-color: #e21765;
}
#radio1:checked + div{
    background-color: #3f5eeb;
}
#radio1:checked + div::first-letter{
    font-size: xx-large;
}

despues de que alguien seleccione un radio o un checkbutton cambiara el color de fondo y con la letra extra grande, y asi, pero solo funcionaron con algunos.
Ahora bien, practicando mas a fondo, logre estas cuestiones que seguramente les puede servir.

/*practica Hermano Cercano*/
.practica input[type="checkbox"] + label{
    color:blue;
    font-weight: bold;
    font-size: xx-small;
}
.practica img{
    width: 25%;
}
.practica img + figcaption::first-letter{
    font-size: xx-large;
    color: brown;
    border: 3px double green;
}
.practica figure + p{
    background-color: #ff7300;
    width: 50%;
}

Espero y los pueda ayudar queridos amigos.

Cabe resaltar que esto de adjacent sibling funciona solo para hermanos menores, y con menores me refiero a los hermanos que estén debajo del elemento. Suena confuso pero funciona así. Si tiene primero un <p> luego un <h2> y luego otro <p>, estamos de acuerdo en que ambos <p> son hermanos de <h2> pero aplicando el combinador de adjacent sibling solo afectará al <p> que está debajo del <h2>.

Creo que esto no está bien explicado, si tomamos eso de que “está cerca”, todos los ‘p’ están cerca de un ‘h2’. Lo que pasa que esto parece que aplica a si está debajo de un ‘h2’. Hay veces que los cursos te lían más de lo que te ayudan.

Yo le agregaria a la definicion de hermano adyacente que es el hermano o pariente inmediatamente inferior, ya que no cubre a los que estan por encima.

Mi practica.
![](

Si quieren una forma más rápida de escribir dentro del div, diferentes etiquetas, pueden hacer esto:

div>p{soy un p}+h2{soy un h2}+h3{soy un h3}

Eso generará lo siguiente

poder entender esto es super importante para aplicar estilos en css.

A + B 

• El conbinador “+” va a seleccionar todas los elementos B que seguen despues del elemento A. Los elementos que siguen uno despues del otro son llamados hermanos siempre y cuando se encuentren al mismo nivel.

Por hermanos adyacentes se entiende aquellos elementos que comparten un mismo padre y que se encuentran uno a continuación del otro en la estructura del documento. El elemento que se selecciona es el que se especifica en segundo lugar.

h2 + p { color: red; }

con esto, le doy color rojo a todas las etiquetas p que estén cerca de una etiqueta h2.
.
“cerca” quiere decir que, a la etiqueta p, le preceda una etiqueta h2. si antes de un p hay un h2, se le aplicara el estilo.

Combinador
El combinador +(hermano adyacente) se usa para referirse a adyacente, es decir h2+p se refiere a todos los p que estén justo después de un h2 en el mismo contenedor.
Hermano general ~ se refiere a un elemento en el mismo contenedor, por ejemplo h2 ~p se refiere a todos los p que tengan un h2 en su mismo contenedor
Hijo > se refiere a un elemento del cual tiene un padre directo, por ejemplo div > p se refiere a todos los p que sean hijos directos de un div
Descendiente “ ” se refiere a que un elemento esté dentro de otro por ejemplo div > p se refiere a un p que esté dentro de un div pero que no sea necesariamente hijo directo

Acá les dejo una lectura sobre los Combinadores en CSS
Selector Descendente (espacio)
Selector de hijo directo (>)
Selector de elemento adyacente (+)
Selector basado en elemento precedente con el mismo padre(~)

¿Qué pasa cuando coloco un párrafo encima de un h2? Pues, miren…

Solo aplica los estilos a los hermanos que estén al lado pero hacia abajo en forma de cascada.

Comenzamos con el tema de Combinadores en CSS.
Esto nos permite dejar a un lado a los ID que como ya vimos nos pueden generar errores conforme avance el proyecto por el peso que tienen en CSS.

Hoy comenzamos con el combinador: Hermano Adyacente o Cercano que se representa por: +
Ejemplo:

h2 + p {
  color: blueviolet;
  text-decoration: underline;
}

y el resultado que obtendremos sera el siguiente: Solo afecta a los p que estan cercanos (Abajo del elemento) h2

Y estos 4 son los combinadores que estaremos viendo 😃

También existe el “combinador” “,” una coma que quiere decir que las propiedades las adquirira mas de un selector. Por ejemplo:
.calse1, #id1, etiquetahtml{} y sus valores se usaran para los 3

Selectores de Hermanos Adyacentes
Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

Sintaxis:

elemento_anterior + elemento_afectado { estilos }

Ejemplo
*
CSS

li:first-of-type + li {
  color: red;
}

HTML

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

¿Cuál de los elementos de la lista sería de color rojo?

<code>
```<!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> Hijo</h2>
        <p> etiqueta de parrafo</p>
        <h2>un H2</h2>
        <h3>este e un H3</h3>
        <p>parrafo</p>
        <h2>es un H2</h2>
        <p>parrafo</p>

    </div>
</body>
</html>

Combinador de hermano adyacente o cercano + (Adjacent Sibling)

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

h2 + p {
  color: red;
}

Los elementos que tienen como padre a un elemento en comun son hermanos.

Adjacent Siblings: Hermano próximo.

<h2>Hermano</h2>
<p>Hermano próximo</p>

h2 + p{
color:red;
}

“colocar color de letra en rojo al elemento p que sea hermano próximo a un elemento h2”

Tambien puedes entenderlo como: aplicale estos estilos a todas las etiquetas p antecedidas por un h2

Se lee: aplícales el color rojo a todas las etiquetas p que estén cerca de las etiquetas h2.

h2 + p {
    color: red;
}

Recomiendo esta “cheat sheet” de selectores: https://webdevsimplified.com/specificity-cheat-sheet.html

• CSS Combinators
• Adjacent sibling Selector

CSS Diner - Where we feast on CSS Selectors!

https://flukeout.github.io/

Cabe resaltar que en el caso de la etiqueta adyacente
h2 + p {
}
el programa toma en cuenta la etiqueta p adyacente que le sigue al h2, es decir la adyacente de abajo y no la adyacente anterior.

Este no es aporte ni nada pero: No me aguanto a ver el examen final de este curso… 🤔

.

tabla de los combinadores

HERMANO CERCANO o adyacent sibling: h2 + p { (aplica estilos a los párrafos cercanos a h2)

Estructura básica HTML con padres e hijos

div p { (Descendientes o descendant)

div > p { (Hijos o child)

div ~ p { (Hermanos generales o general sibling)

div + p { (Hermano más cercano)

COMBINADORES hay más, pero aquí los más importantes. Combinan múltiples selectores y crear una mayor especificidad.

Entonces para no usar tantos class y id podemos usar combinadores, y diras que son los combinadores?

pues el primero el Adjacent Siblings

<etiqueta> + p {.......}

y se trata de que cualquier etiqueta <p> que este debajo de <etiqueta> se veran afectadas en los estilos asignados

☺☺

Para los que quieren agregar rapidamente la estructura html pero con la configuración de las clases iniciales, pueden hacer un snippet en vscode facilmente, presiona la tecla ctrl+shift+p, luego coloca la palabara snippet y le dan en agregar uno nuevo, eligen el archivo de configuración respecto al lenguaje, en este caso html.json, y allí colocan este fragmento:

"PlantillaHTML": {
		"prefix": "HTML: 5",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"es\">",
				"\t<head>",
					"\t\t<meta charset=\"UTF-8\">",
					"\t\t<meta name=\"Description\" content=\"Extended Description\">",
					"\t\t<meta name=\"robots\" content=\"index,follow\">",
					"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
					"\t\t<title>Document Title</title>",
					"\t\t<link rel=\"stylesheet\" href=\"\">",
				"\t</head>",
				"\t<body>",
				"\t</body>",
			"</html>"
		]
	}

El caracter + es el signo del combinador de hermanos adyacentes o cercanos

Combinador: Hermano adyacente o cercano

https://platzi.com/clases/2008-html-css/31065-combinadores-adjacent-siblings-combinators/?time=51

Los combinadores CSS nos permiten combinar múltiples selectores y crear mayor especificidad.

al fin entendi para que sirve el + en css

Muy interesante la verdad.

RESUMEN CLASE 30:
COMBINADORES:
ADJACENT SIBLINGS
(COMBINATORS)

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>
        <h2>Soy un h2</h2>
        <p>Soy un p</p>
    </div>
</body>
</html>

CSS

h2 + p {
    color: red;
}

Información resumida de esta clase
#EstudiantesDePlatzi

• Los combinadores nos permiten combinar múltiples selectores y crear una mejor especificidad

• h2 + p = Esto quiere decir. A todas las etiquetas p que están cerca de h2 aplíquele los siguientes. A esto se le llama hermano cercano

• Esta práctica nos ayuda a ser más específico y no usar tanto la class

Muy interesante, que maravilloso es entender algo que usaste pero no sabias que era jajaja

Super Esta Clase

Gracias

Combinadores: Adjacent Siblings

Los combinadores nos permiten combinar múltiples selectores y crear una mayor especificidad, sin necesidad de agregar más id.
Se lee, colocar el color rojo a todas las etiquetas p cercanas a h2. Es decir, aquellas etiquetas p que tenga directamente arriba una etiqueta h2.

Gracias Hermano cercano Diego jajajajaja

Terminar este reto del platzi day 2022, esta fuerte, pero creo que si se puede.

Me gustó mucho la opción de Hermano adyacente o cercano. Es muy práctica. Ejemplo:

h2 + p {
    color: red;
}

no tenia ni idea que esto excistia, no le veo un uso la vdd

Si utilizamos la combinacion de hermano adyacente en el mismo ejercicio, en donde querramos actuar solo sobre el tercer h2, por ejemplo; tendremos que encontrar la combinacion de hermanos que coincida con el elemento.
En este caso h3 + p + h2 y se puede entender como :
actua sobre el ultimo elemento tal que la combinacion coincida de arriba hacia abajo. primero h3 luego p y por ultimo h2.
No ocurre lo mismo si solo ponemos p + h2, por que hay dos combinaciones iguales, el segundo h2 y el tercero.

h2 + p{ /Es decir que aplicale el color rojo a todas las etiquetas parrafo § que esten cercas de los h2/
color: red;
}

De hecho no se aplica la regla a los p cercanos a un div, màs bien se aplica a los p que sean directamente precedidos por un div.

aplicación de combinadores

simbolos
hermanos adyacentes (+)
hermanos general (~)
elementos hijo es un símbolo de «mayor que» (>)

ojo: Si eliminamos el símbolo > que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicará el borde rojo a todos los elementos

fuerte: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors/Combinators

muy bien explicado al inicio tenia dudas pero con el final quedo claro