web-dev-qa-db-fra.com

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

La recherche du caractère ~ n'est pas facile. Je cherchais du CSS et ai trouvé ceci

.check:checked ~ .content {
}

Qu'est-ce que ça veut dire?

csscss3css-selectors
775
Akshat

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

Le combinateur général de frères et sœurs 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 du document 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 aux 4ème et 5ème éléments de la liste car ils:

  • Sont des éléments .b
  • Est-ce que les frères et sœurs de .a
  • Apparaît après .a dans l'ordre des sources HTML.

De même, .check:checked ~ .content correspond à tous les .content éléments qui sont frères de .check:checked et apparaissent après celui-ci.

1274
Salman A

Combinateur général frère

Le sélecteur général de combinateur de frères et soeurs 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 succéder immédiatement au premier élément, mais peut apparaître n'importe où après.

Plus d'infos

170
Rohit Azad

C'est bien de vérifier également les autres combinateurs de la famille et de revenir à la question de savoir quelle est cette personne spécifique.

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

Exemple de liste de contrôle:

  • ul li - Regardant à l'intérieur - Sélectionne tout les éléments li placés (n’importe où) à l’intérieur du ul; Sélecteur de descendance
  • ul > li - Regarder à l'intérieur - Sélectionne uniquement les éléments directs li de ul; c’est-à-dire qu’il ne sélectionnera que les enfants directs li sur ul; Sélecteur d'enfants ou Sélecteur de combinateur d'enfants
  • ul + ul - Regardant à l'extérieur - Sélectionne la ul suivant immédiatement le ul; Il ne regarde pas à l'intérieur, mais cherche à l'extérieur l'élément immédiatement suivant. Sélecteur de fratrie adjacent
  • ul ~ ul - Regardant à l'extérieur - Sélectionne tous les ul qui suit le ul importe peu où il se trouve, mais les deux ul devraient avoir le même parent; Sélecteur général de frères et soeurs

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

148
Lijo Joseph

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

Ce qui me manquait, c’est Adjacent sibling combinator qui est + et qui est étroitement lié à ~.

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 .a en HTML

Dans l'exemple ci-dessus, cela indiquera 2nd li mais pas 4ème.

   .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

27
Matas Vaitkevicius

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 valeur .

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

6
Ian Hunter