Selectores CSS basados en relaciones

blog tutorial css

Los selectores CSS basados en relaciones son aquellos que no simplemente afectan a un solo elemento, sino que ya podemos interactuar con otros elementos de diferentes maneras.

Índice

Selector Descendente

Un selector descendente le da estilos a uno o más elementos que se encuentran dentro de otros elementos, sin importar la profundidad.

See the Pen Descendant Selector by Fili Santillán 👾 (@FiliMX) on CodePen.

Selector De Hijo

Este selector es similar al selector descendiente, solo que este da estilos a un elemento que es hijo de otro elemento.

En el selector de hijo el elemento tiene que ser hijo directo del elemento y no va más profundo, se indica con el signo de “mayor que” >

See the Pen Child Selector by Fili Santillán 👾 (@FiliMX) on CodePen.

Selector Adyacente De Hermanos

El selector adyacente da estilos al elemento que sea hermano de otro elemento, es decir, que los dos tengan el mismo padre y se indica con el signo +

See the Pen Adjacent Sibling Selector by Fili Santillán 👾 (@FiliMX) on CodePen.

Tal vez esto pueda ser un poco confuso, pero te lo explico para que lo entiendas. Lo que está pasando es que tenemos un elemento padre el cual tiene tres hijos hijo1, hijo2 e hijo3, estos al ser hijos del mismo padre se convierten en hermanos y lo que hacemos con el signo de + es darle estilos al hermano más cercano de hijo1 ósea hijo2 es por eso que hijo3 no se ve afectado.

Selector General De Hermanos

El selector general de hermanos es totalmente igual al selector adyacente, solo que este si toma en cuenta a todos los hermanos de hijo1 y se indica con el signo ~

See the Pen General Sibling Selector by Fili Santillán 👾 (@FiliMX) on CodePen.