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


858

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?


3
Découvrez la démo que vous comprendrez Voici une liste de sélecteurs CSS
Dipak

@TylerH, c'est quelque chose de très courant dans les publications Stack Overflow, s'il vous plaît, allez-y doucement, je n'avais pas l'intention de l'aggraver.
Arsen Khachaturyan

@ArsenKhachaturyan Peut-être vous méprenez-vous; la syntaxe des guillemets est destinée à indiquer une citation , c'est-à-dire lorsqu'un utilisateur indique que quelque chose (texte, image, code, etc.) n'est pas son propre travail ou ses propres mots, mais qu'il est copié ailleurs. Comme tout formatage, il a un objectif sémantique; ce n'est pas quelque chose à ajouter bon gré mal gré. De même, veuillez ne pas ajouter de surlignage gras aléatoire aux mots. Il doit être utilisé avec insistance, avec parcimonie.
TylerH

@TylerH Je comprends que son nom est "citation" et aussi ce que signifie la "citation" elle-même. Cependant, parfois, lorsque vous voulez vraiment distinguer les questions du texte ordinaire, vous pouvez essayer certaines techniques d'accentuation comme je l'ai fait. Pour mettre en gras, il est également évident d'utiliser lorsque vous souhaitez mettre l'accent sur des choses, comme des mots clés ou des termes bien connus. Je n'aime généralement pas quand les gens utilisent le gras pour des raisons inconnues, mais il peut parfois être utilisé pour que les gens trouvent facilement des informations liées au sujet.
Arsen Khachaturyan

@ArsenKhachaturyan S'il vous plaît ne faites pas ça. >est uniquement pour les citations , il ne doit jamais être utilisé à d'autres fins. Vous ne devriez pas non plus mettre en gras les noms de technologies aléatoires dans la question. Nous pouvons voir quelles technologies sont pertinentes via des balises.
meagar

Réponses:


1372

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.


13
"Pas nécessairement immédiatement" est l'élément clé de cette description.
PanicBus

1
Existe-t-il également un sélecteur pour tous les éléments ayant le même parent?
Nick N.

1
@NickN. tu veux dire .parent > *?
Salman A

@SalmanA pas exactement, j'espérais qu'il y avait un sélecteur que vous pouvez utiliser, si vous ne connaissez pas le parent.
Nick N.20

8
@ NickN.No il n'y en a pas. CSS est fait avec la proposition que l'analyseur CSS ne regarde jamais en arrière dans le DOM pour faire une correspondance. C'est la même raison qu'il n'y a pas de sélecteur parent.
2017

192

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


2
Celui-ci avait le plus de sens. La terminologie de Layman à nouveau à la rescousse. Je peux maintenant lire la documentation technique.
TheRealChx101

2
Existe-t-il un sélecteur de frères et sœurs pour TOUS les frères et sœurs, pas seulement ceux qui suivent?
Elijah Mock

1
@EliTheHuman, non. Veuillez vous référer à cet article SO pour plus de détails - stackoverflow.com/a/11813469/6830901
Lijo Joseph

174

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


31

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


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.