¿Hay algo así como un selector de CSS “hermano todo incluido”?

Mi HTML:

Doggies

Froggies

Cupcakes

Piggies

Un selector de hermanos todo incluido (como me gustaría que fuera), cuando se usa para seleccionar a los hermanos de green_guys, seleccionaría los perritos cupcakes y piggies.

Otros Selectores:

El selector + (también conocido como selector de hermanos adyacente ) solo seleccionaría los cupcakes:

 .green_guys + p { /* selects the 

element that immediately follows .green_guys */ }

El selector ~ (también conocido como selector general de hermanos ) solo seleccionaría cupcakes y cerditos:

 .green_guys ~ p { /* selects all 

elements that follow .green_guys */ }

No hay un combinador de hermanos que mira hacia atrás o alrededor, solo los combinators hermanos adyacentes y generales que miran hacia adelante.

Lo mejor que puede hacer es determinar una forma de limitar la selección solo a estos elementos p con el mismo padre, y luego seleccionar los p hijos que son :not(.green_guys) . Si el elemento principal tiene una ID de #parent , por ejemplo, puede usar este selector:

 #parent > p:not(.green_guys) { /* selects all 

children of #parent that are not .green_guys */ }

Sin embargo, lo anterior aún coincidirá con sus elementos p , incluso si ninguno de ellos tiene la clase. Actualmente no es posible seleccionar los hermanos de un elemento solo dada la existencia de dicho elemento (que es el propósito de un combinador de hermanos: establecer una relación entre dos elementos hermanos).


Selectores 4 :has() se espera que :has() rectifique esto sin la necesidad de un combinador de hermanos precedentes, dando como resultado la siguiente solución:

 p:has(~ .green_guys), .green_guys ~ p { /* selects all 

elements that are siblings of .green_guys */ }

Esto no coincidirá con nada si ninguno de los hijos del elemento primario tiene la clase.

No que yo sepa. Tampoco hay un selector de siblings .

Esto podría funcionar, sin embargo:

 #parent_of_green_guys > p:not(.green_guys) { foo: bar; } 

O si no está buscando p s con atributos de class :

 #parent_of_green_guys > p:not([class]) { foo: bar; } 

Mi escenario era un poco diferente, pero quería seleccionar hermanos de un elemento de entrada para mostrar uno mientras estaba activo y otro si se dejaba inválido.

Mi html era así y no pude seleccionar el texto no válido.

  

Pude sortearlo incrustando a los hermanos en uno adyacente y usando selectores de niños en eso.

  
.help-text, .invalid-text { visibility:hidden; } .input:active +.messages > .help-text { visibility:visible; } .input.invalid:visited +.messages > .invalid-text { visibility:visible; }

Y funcionó.