A ~ B
Le signe ~ sélectionne tous les éléments B qui se trouvent n’importe où après l’élément A et partagent le même parent que lui.
Exemple
#.hint {
display: none;
}
.field input:focus ~ .hint {
display: block;
}<style>
.field { display: grid; gap: 6px; }
.field input { padding: 8px 10px; border: 1px solid #52525b; border-radius: 8px; background: #18181b; color: inherit; font: inherit; }
.field small { color: #71717a; }
.field .hint { margin: 0; color: #c4b5fd; font-size: 14px; }
</style>
<div class="field stage">
<label for="nick">Nom du joueur</label>
<input id="nick" placeholder="Cliquez dans le champ">
<small>Visible par les autres joueurs</small>
<p class="hint">De 3 à 20 caractères, sans espaces.</p>
</div>Cliquez dans le champ. L’indication se trouve deux éléments plus loin, et ~ la trouve malgré tout. Le combinateur + n’aurait pas fonctionné ici.
Définition et utilisation
#Le combinateur de voisins généraux, aussi appelé combinateur de frères suivants, est une version plus souple de +. L’écriture h2 ~ p sélectionne chaque paragraphe qui se trouve après un titre h2 au même niveau, même si d’autres éléments se trouvent entre eux.
Comme avec +, seuls les éléments après A comptent, jamais avant lui, et seulement ceux qui ont le même parent. Un élément dans un autre conteneur ne correspond pas, même s’il se trouve plus bas dans le code.
Ce combinateur est utile dans des interfaces pilotées par l’état des champs de formulaire : un champ au début d’un conteneur peut changer l’apparence des éléments situés plus loin dans ce même parent, par exemple input:focus ~ .hint. Aujourd’hui, des effets similaires s’écrivent souvent plus facilement avec :has(), qui ne dépend pas de l’ordre des éléments.
Syntaxe
#A ~ B { propriété: valeur; }Exemples de sélecteurs
#- Chaque
spanaprès.start, y compris le 5 qui se trouve après l’élémentem. Le 1 est exclu, car il se trouve avant.start. - Tous les frères suivants de
.start, quel que soit le type de l’élément. - Chaque
spanprécédé, n’importe où avant lui, d’un autrespan. Tous correspondent sauf le premier.
Exemples de sélecteurs en pratique
#.start ~ span
span après .start, y compris le 5 qui se trouve après l’élément em. Le 1 est exclu, car il se trouve avant .start..start ~ span { background: #7c3aed; color: #fff; }.start ~ *
.start, quel que soit le type de l’élément..start ~ * { background: #7c3aed; color: #fff; }span ~ span
span précédé, n’importe où avant lui, d’un autre span. Tous correspondent sauf le premier.span ~ span { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Le combinateur ne voit pas les éléments avant A ni dans d’autres conteneurs. Si quelque chose ne fonctionne pas, vérifiez dans les outils de développement que les deux éléments ont bien le même parent.
- L’astuce de la case à cocher cachée combinée à
~permet de créer un menu sans JavaScript, mais pour les menus et les accordéons, l’élément<details>ou un bouton avecaria-expandedest préférable, car compris par les lecteurs d’écran. :has()vous libère de l’ordre :.field:has(input:focus) .hintaffichera l’indication quel que soit son emplacement dans le conteneur.
Entrées associées
#- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
- A > BLe signe > sélectionne les éléments B qui sont des enfants directs de l’élément A, c’est-à-dire situés exactement un niveau plus bas.
- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
- :focusCorrespond à l’élément qui a le focus, c’est-à-dire qui reçoit actuellement la saisie au clavier, par exemple un champ de formulaire cliqué.
- :checkedCorrespond à une case cochée, à un bouton radio sélectionné et à l’option choisie dans une liste select.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.