:target-within
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La pseudo-classe CSS :target-within
représente un élément ciblé ou qui contient un élément ciblé. Un élément ciblé est un élément unique disposant d'un id
correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe :target
ou qui a un descendant correspondant à :target
(cela inclut les descendants des arbres fantômes).
/* Sélectionne une <div> lorsqu'un de ses descendants est une cible */
div:target-within {
background: cyan;
}
Syntaxe
:target-within {
/* ... */
}
Exemples
Mise en avant d'un article
La pseudo-classe :target-within
peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe :target
est aussi utilisée pour montrer l'élément qui a été ciblé.
HTML
<h3>Table des matières</h3>
<ol>
<li><a href="#p1">Aller au premier paragraphe !</a></li>
<li><a href="#p2">Aller au second paragraphe !</a></li>
</ol>
<article>
<h3>Mon bel article</h3>
<p id="p1">
Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL.
Cliquez sur le lien ci-dessus pour essayer !
</p>
<p id="p2">
Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens
ci-dessus. N'est-ce pas savoureux ?
</p>
</article>
CSS
article:target-within {
background-color: gold;
}
/* Ajout d'un pseudo élément à l'intérieur de l'élément cible */
p:target::before {
font: 70% sans-serif;
content: "►";
color: limegreen;
margin-right: 0.25em;
}
/* Style des éléments en italique à l'intérieur de l'élément cible */
p:target i {
color: red;
}
Résultat
Spécifications
Specification |
---|
Selectors Level 4 # target-within-pseudo |
Compatibilité des navigateurs
Voir aussi
- La pseudo-classe
:target