CSS :target Pseudo-classe
La pseudo-classe CSS :target sélectionne les éléments ciblés par un lien interne. Découvrez son fonctionnement et pratiquez avec des exemples.
La pseudo-classe :target correspond à un élément dont l'id est égal au fragment de l'URL actuelle — la partie après le #. Lorsque vous visitez une URL comme page.html#section2, l'élément avec id="section2" devient la cible, et :target vous permet de le styliser.
Cette page explique comment fonctionne :target, quand l'utiliser, ses limitations, et quatre patterns pratiques que vous pouvez construire sans JavaScript : une mise en surbrillance dans la page, un menu à onglets, une boîte modale et une lightbox.
Fonctionnement de :target
Le navigateur suit un seul élément cible par page — l'élément dont l'id correspond au fragment de l'URL actuelle. En cliquant sur un lien de la même page comme <a href="#section2">, le fragment est mis à jour, ce qui :
- fait défiler l'élément correspondant dans la vue, et
- fait correspondre cet élément à
:target, appliquant les styles que vous avez définis.
Étant donné que naviguer vers un fragment crée une véritable entrée dans l'historique, le bouton Retour fonctionne comme un « annuler » : il revient au fragment précédent (ou à l'absence de fragment), de sorte qu'un menu, une modale ou une lightbox pilotés par :target se ferment d'eux-mêmes lorsque l'utilisateur appuie sur Retour.
/* Style the element currently referenced by the URL fragment */
:target {
border: 2px solid #1c87c9;
background-color: #eee;
}Quelques points à retenir :
- Un seul élément peut être la cible à la fois — le fragment est une valeur unique, donc
:targetstylise au plus un élément sur la page. - C'est un sélecteur avec état. L'état réside dans l'URL, pas dans le balisage ni dans JavaScript, ce qui est précisément la raison pour laquelle il peut piloter des widgets interactifs sans script.
- Un
#seul efface la cible. Lier vershref="#"(ouhref="#nonexistent") supprime la correspondance, ce qui est la façon dont les boutons « fermer » dans les exemples de modale et de lightbox ci-dessous fonctionnent.
Quand l'utiliser
Choisissez :target lorsque vous souhaitez une interactivité légère et sans script, naturellement liée à l'URL :
- Mettre en surbrillance la destination d'un lien de saut dans la page (notes de bas de page, entrées de glossaire, table des matières).
- Afficher/masquer des widgets — onglets, accordéons, modales, lightboxes — où une URL partageable ou mémorisable est un avantage.
Préférez JavaScript (ou des éléments natifs comme <details> et <dialog>) lorsque vous avez besoin que l'état ouvert ne change pas l'URL, lorsque vous devez piéger le focus pour l'accessibilité, ou lorsque plusieurs panneaux doivent être ouverts simultanément.
Note d'accessibilité : comme
:targetbascule la visibilité par navigation, les utilisateurs de clavier et de lecteurs d'écran déplacent le focus vers l'élément ciblé automatiquement — un point en sa faveur. Mais il ne peut pas piéger le focus à l'intérieur d'une modale, donc pour de vraies boîtes de dialogue, l'élément natif<dialog>est le choix le plus robuste.
:target est une pseudo-classe comme :hover et :focus ; pour une vue d'ensemble des sélecteurs, voir CSS Selectors.
Syntaxe
:target {
/* CSS declarations */
}Version
:target est largement pris en charge dans tous les navigateurs modernes. Il est défini dans :
Exemple : mise en surbrillance d'une cible de saut
Cliquez sur un lien, et le paragraphe correspondant reçoit une bordure et un arrière-plan car il devient la :target :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
:target {
border: 2px solid #1c87c9;
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:target selector example</h2>
<p>
<a href="#example1">Jump to Paragraph 1</a>
</p>
<p>
<a href="#example2">Jump to Paragraph 2</a>
</p>
<p id="example1">
<strong>Paragraph 1</strong>
</p>
<p id="example2">
<strong>Paragraph 2</strong>
</p>
</body>
</html>Exemple : un menu à onglets
Chaque lien d'onglet pointe vers un panneau masqué. Seul le panneau dont l'id correspond au fragment est affiché, de sorte que l'onglet visible est celui que vous avez cliqué en dernier :
<!DOCTYPE html>
<html>
<head>
<style>
.tab-menu div {
display: none;
background-color: #f5f5f5;
padding: 0 20px 20px;
}
.tab-menu a {
text-decoration: none;
padding: 10px;
margin: 20px 0;
display: inline-block;
}
.tab-menu div:target {
display: block;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<div class="tab-menu">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<div id="html">
<h2>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</h2>
<p>HTML-Hyper Text Markup Language
</p>
</div>
<div id="css">
<h2>
<a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
</h2>
<p>CSS-Cascading Style Sheets
</p>
</div>
<div id="php">
<h2>
<a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
</h2>
<p>PHP-Hypertext Preprocessor
</p>
</div>
</div>
</body>
</html>Exemple : une boîte modale
La .modal est masquée par défaut et n'est affichée que lorsqu'elle est la :target. Le lien « Open Modal » définit le fragment sur #modal ; le bouton de fermeture pointe vers #, ce qui efface la cible et masque à nouveau la modale :
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
text-decoration: none;
padding: 10px 20px;
background-color: #8ebf42;
color: #ffffff;
font-family: sans-serif;
}
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
text-align: center;
line-height: 1.6;
}
header {
background-color: #337ab7;
font-size: 25px;
color: white;
}
header h2 {
text-align: left;
}
footer {
background-color: #337ab7;
font-size: 20px;
color: white;
}
footer p {
text-align: right;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#modal">Open Modal</a>
<div id="modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Header</h2>
</header>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<footer class="container">
<p>Footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>Il existe une légère différence entre les boîtes modales et les lightboxes. Une lightbox peut être fermée en cliquant sur l'overlay assombri en dehors de la fenêtre contextuelle, tandis qu'une boîte modale ne se ferme qu'en interagissant à l'intérieur (ici, le bouton de fermeture).
Exemple : une lightbox
La lightbox fonctionne de la même façon que la modale, mais un overlay plein écran (.close::before) se trouve derrière le contenu et pointe également vers #, de sorte que cliquer n'importe où en dehors de la figure la ferme :
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
background-color: #8ebf42;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
margin: 15px 0;
display: inline-block;
}
/* Unopened lightbox */
.lightbox {
display: none;
}
/* Opened lightbox */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Lightbox content */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: #8ebf42;
}
/* Close button */
.lightbox .close {
position: relative;
display: block;
}
.lightbox .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* Lightbox overlay */
.lightbox .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
content: "";
cursor: default;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#lightbox">Open Lightbox</a>
<div class="lightbox" id="lightbox">
<figure>
<a href="#" class="close"></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem.
</figcaption>
</figure>
</div>
</body>
</html>Sélecteurs associés
:hoveret:focus— autres pseudo-classes interactives pour styliser les états pilotés par l'utilisateur.:not()— utile pour styliser tout sauf la cible actuelle, par exemple.modal:not(:target).:rootet:empty— autres pseudo-classes structurelles.- CSS Selectors — une vue d'ensemble complète des types de sélecteurs.