¿Qué significa el selector CSS "~" (tilde/garabato/twiddle)?
Buscar al ~personaje no es fácil. Estaba revisando algo de CSS y encontré esto.
.check:checked ~ .content {
}
¿Qué significa?
El ~selector es, de hecho, el combinador de hermanos posteriores (anteriormente llamado combinador de hermanos general hasta 2017 ):
El combinador de hermanos posteriores está formado por el carácter "tilde" (U+007E, ~) que separa dos secuencias de selectores simples. Los elementos representados por las dos secuencias comparten el mismo padre en el árbol del documento y el elemento representado por la primera secuencia precede (no necesariamente inmediatamente) al elemento representado por la segunda.
Considere el siguiente ejemplo:
.a ~ .b {
background-color: powderblue;
}<ol>
<li class="b">b</li>
<li class="a">a</li>
<li class="x">x</li>
<li class="b">b</li>
<li class="b">b</li>
</ol>.a ~ .bcoincide con el cuarto y quinto elemento de la lista porque:
- son
.belementos - son hermanos de
.a - Aparecen después
.aen el orden de origen HTML.
Asimismo, .check:checked ~ .contentcoincide con todos .contentlos elementos que son hermanos .check:checkedy aparecen después de él.
Es bueno consultar también los otros combinadores de la familia y volver a cuál es este específico.
ul liul > liul + ulul ~ ul
Lista de verificación de ejemplo:
ul li- Mirando hacia adentro : selecciona todos loslielementos colocados (en cualquier lugar) dentro delul; combinador descendienteul > li- Mirando hacia adentro - Selecciona solo los elementos directoslideul; es decir, sólo seleccionará hijos directoslideul; combinador infantilul + ul- Mirando hacia afuera - Selecciona el queulsigue inmediatamente alul; No es mirar hacia adentro, sino hacia afuera buscando el elemento inmediatamente siguiente; Combinador de hermanos adyacentes / Combinador de hermanos siguientesul ~ ul- Mirando hacia afuera : selecciona todos los siguientesul, pero ambosuldeben tener el mismo padre; Combinador de hermanos general / Combinador de hermanos posteriores
El que estamos viendo aquí es el combinador de hermanos general / combinador de hermanos posteriores.
Combinador general de hermanos
El selector combinador de hermanos general es muy similar al selector combinador de hermanos adyacente. La diferencia es que el elemento seleccionado no necesita suceder inmediatamente al primer elemento, sino que puede aparecer en cualquier lugar después de él.
Más información
