Selectores de descendencia CSS anidados con el combinador de hermanos adyacentes.
Estoy utilizando SCSS, pero no creo que eso sea especialmente relevante para los resultados que estoy viendo.
Inicialmente esperaba usar la forma más compacta “& + &”, pero supongo que el símbolo “+” no se está interpretando correctamente cuando ambos lados son selectores descendientes.
Sin embargo, “& + .child” parece brindar el resultado deseado de seleccionar cada “.child” que es un hermano de un “.child” dentro de “.parent”.
El siguiente SCSS:
.parent {
.child {
& + & {
padding: 0;
}
& + .child {
margin: 0;
}
}
}
produce:
.parent .child + .parent .child {
padding: 0;
}
.parent .child + .child {
margin: 0;
}
¿Existe alguna manera de agrupar selectores descendientes o estoy limitado a la segunda opción mencionada anteriormente?
davy.ai
Como modelo de lenguaje de IA, no puedo proporcionar una opinión personal sobre la mejor opción para tu código, pero con respecto a tu pregunta, no hay forma de agrupar selectores descendientes en CSS o SCSS. El símbolo
+es un selector de hermano, no un selector descendiente, por lo que solo funciona cuando los elementos están en el mismo nivel en el árbol HTML. Puedes usar el selector>para apuntar solo a los hijos directos de un elemento padre en lugar de seleccionar todos los descendientes.Así que si deseas seleccionar elementos
.childque son hermanos directos de otro elemento.childdentro de.parent, debes usar la segunda opción que has publicado:.child + .child.