: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).

css
/* Sélectionne une 
 lorsqu'un de ses descendants est une cible */
div:target-within {
  background: cyan;
}

Syntaxe

css
: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

html
Table des matières


    
  
  1. Aller au premier paragraphe !
    2. 
  
  2. Aller au second paragraphe !
    3. 





  
Mon bel article

  

    Vous pouvez cibler ce paragraphe en utilisant un fragment d'URL.
    Cliquez sur le lien ci-dessus pour essayer !
  

  

    Ceci est un autre paragraphe, également accessible depuis les liens
    ci-dessus. N'est-ce pas savoureux ?

CSS

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