Que signifie le sélecteur CSS «~» (tilde / squiggle / twiddle)?

La recherche du ~personnage n'est pas facile. Je regardais du CSS et j'ai trouvé ça

.check:checked ~ .content {
}

Qu'est-ce que ça veut dire?

Le ~sélecteur est en fait le combinateur frère général (renommé combinateur frère ultérieur dans les sélecteurs niveau 4 ):

Le combinateur frère général est constitué du caractère "tilde" (U + 007E, ~) qui sépare deux séquences de sélecteurs simples. Les éléments représentés par les deux séquences partagent le même parent dans l'arborescence de documents et l'élément représenté par la première séquence précède (pas nécessairement immédiatement) l'élément représenté par la seconde.

Prenons l'exemple suivant:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b correspond à l'élément de liste 4e et 5e car:

• Sont des .béléments
• Les frères et sœurs de .a
• Apparaître après .adans l'ordre source HTML.

De même, .check:checked ~ .contentcorrespond à tous les .contentéléments qui sont frères .check:checkedet sœurs et qui apparaissent après.

Bon de vérifier également les autres combinateurs de la famille et de revenir à ce qui est spécifique.

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

Exemple de liste de contrôle:

• ul li- Regard à l'intérieur - Sélectionne tous les liéléments placés (n'importe où) à l'intérieur du ul; Sélecteur descendant
• ul > li- Regard à l'intérieur - Sélectionne uniquement les li éléments directs de ul; c'est-à-dire qu'il ne sélectionnera que les enfants directs lide ul; Sélecteur enfant ou sélecteur combinateur enfant
• ul + ul- En regardant à l'extérieur - Sélectionne ulimmédiatement après ul; Il ne regarde pas à l'intérieur, mais cherche à l'extérieur l'élément immédiatement suivant; Sélecteur de frère adjacent
• ul ~ ul- Regarder à l'extérieur - Sélectionne tout ce ulqui suit ulpeu importe où il se trouve, mais les deux uldoivent avoir le même parent; Sélecteur général de frères et sœurs

Celui que nous examinons ici est le sélecteur général de frères et sœurs

Combinateur général de frères et sœurs

Le sélecteur de combinateur frère général est très similaire au sélecteur de combinateur frère adjacent. La différence est que l'élément sélectionné n'a pas besoin de réussir immédiatement le premier élément, mais peut apparaître n'importe où après.

Plus d'informations

C'est General sibling combinator et est très bien expliqué dans la réponse de @ Salaman.

Ce que j'ai manqué, c'est Adjacent sibling combinatorce qui est +et est étroitement lié à~ .

par exemple serait

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• Correspond aux éléments qui sont .b
• Sont adjacents à .a
• Après .aen HTML

Dans l'exemple ci-dessus, il marquera le 2e limais pas le 4e.

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Notez que dans un sélecteur d'attribut (par exemple, [attr~=value]), le tilde

Représente un élément avec un nom d'attribut attr dont la valeur est une liste de mots séparés par des espaces, dont l'un est exactement value .

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