Che cosa significa il selettore CSS “~” (tilde / squiggle / twiddle)?

Cercare il ~ personaggio non è facile. Stavo guardando alcuni CSS e ho trovato questo

 .check:checked ~ .content { } 

Cosa significa?

Il selettore di selezione è in effetti il combinatore di fratello generale (rinominato in Combined-sibling combinator in selettori di livello 4 ):

Il combinatore di fratellanza generale è costituito dal carattere “tilde” (U + 007E, ~) che separa due sequenze di selettori semplici. Gli elementi rappresentati dalle due sequenze condividono lo stesso genitore nell’albero del documento e l’elemento rappresentato dalla prima sequenza precede (non necessariamente immediatamente) l’elemento rappresentato dal secondo.

Considera il seguente esempio:

 .a ~ .b { background-color: powderblue; } 
 
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

Combinatore di fratelli generici

Il selettore generale del combinatore di pari livello è molto simile al selettore del fratello adiacente del combinatore. La differenza è che l’elemento selezionato non ha bisogno di succedere immediatamente al primo elemento, ma può apparire ovunque dopo di esso.

Ulteriori informazioni

Buono anche per controllare gli altri combinatori della famiglia e per tornare a quello che è questo specifico.

  • ul li
  • ul > li
  • ul + ul
  • ul ~ ul

Esempio di lista di controllo:

  • ul liLooking inside – Seleziona tutti gli elementi li posizionati (ovunque) all’interno ul ; Selettore discendente
  • ul > liLooking inside – Seleziona solo gli elementi li diretti di ul ; cioè selezionerà solo i bambini diretti di ul ; Selettore bambino o Selettore combinatore bambino
  • ul + ulLooking outside – Seleziona l’ ul immediatamente dopo l’ ul ; Non sta guardando dentro, ma guardando fuori per l’elemento immediatamente successivo; Selettore Sibling adiacente
  • ul ~ ulGuardando fuori – Seleziona tutto ciò che segue l’ ul non importa dove sia, ma entrambi dovrebbero avere lo stesso genitore; Selettore generale del fratello germano

Quello che stiamo guardando qui è General Sibling Selector

È un General sibling combinator ed è spiegato molto bene nella risposta di @ Salaman.

Quello che mi è mancato è il Adjacent sibling combinator che è + ed è strettamente correlato a ~ .

esempio sarebbe

 .a + .b { background-color: #ff0000; } 
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • Trova gli elementi che sono .b
  • Sono adiacenti a .a
  • Dopo .a in HTML

Nell’esempio sopra segnerà il 2 ° ma non il 4 °.

  .a + .b { background-color: #ff0000; } 
 
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

Si noti che in un selettore di attributo (es. [data-components~=wheels] ), la tilde

Rappresenta un elemento con un nome attributo di attr il cui valore è un elenco di parole separate da spazi, una delle quali è esattamente un valore.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors