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.
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” >
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 +
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
padreel cual tiene tres hijoshijo1,hijo2ehijo3, 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 dehijo1óseahijo2es por eso quehijo3no 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 ~