Vous avez déjà cliqué sur un lien qui vous amène directement à une section précise d’une page ? Par exemple un menu “Contact” qui vous fait descendre tout en bas du site. Ce petit effet repose souvent sur un simple lien HTML… mais ce que peu de débutants savent, c’est qu’on peut aussi styler cette section ciblée uniquement avec du CSS, grâce à la pseudo-classe :target.

• Fonctionne la pseudo-classe :target et savoir l’utiliser pour rendre vos pages plus interactives sans écrire une seule ligne de JavaScript.
• Créer des effets concrets et modernes en webdesign (onglets, FAQ, sections dynamiques) pour améliorer l’expérience utilisateur.
• Gagner en autonomie en maîtrisant un sélecteur CSS puissant qui renforce votre logique HTML, votre navigation interne et votre structure de page.

On va commencer à s’amuser. Pas besoin de JavaScript. Pas de code compliqué. Juste un peu de logique, un identifiant bien placé… et la magie opère. Dans ce tutoriel, vous allez comprendre le fonctionnement de la pseudo-classe :target CSS et comment l’utiliser concrètement en webdesign.

Comprendre le principe de :target

Avant d’écrire la moindre ligne de CSS, prenons une minute pour comprendre ce qu’est réellement :target.

La pseudo-classe :target en CSS permet de sélectionner un élément HTML lorsque son identifiant correspond à l’ancre présente dans l’URL.

Dit autrement : quand vous cliquez sur un lien qui contient un #quelquechose, l’élément qui possède id="quelquechose" devient la cible. Et c’est exactement à ce moment-là que :target entre en jeu.

Un petit exemple simple :

<a href="#section1">Voir la section 1</a>

<h2 id="section1">Section 1</h2>

Quand vous cliquez sur le lien, l’URL devient :

monsite.fr/#section1

Et l’élément <h2 id="section1"> devient la cible active.

En CSS, vous pouvez alors écrire :

#section1:target {
    color: red;
}

• Résultat : le titre devient rouge uniquement lorsqu’il est ciblé par l’URL. À partir du moment où on a cliqué sur le lien interne de la page (ancre).

C’est ça, :target css. Une règle qui s’active dynamiquement selon l’ancre présente dans l’adresse de la page.

Comment fonctionne réellement :target ?

Pour bien comprendre, décomposons le mécanisme.

1. Vous devez avoir un lien contenant un # (une ancre).
2. Un élément HTML doit posséder un attribut id correspondant exactement à ce nom.
3. Troisième étape : vous appliquez la pseudo-classe :target en CSS.

C’est tout.

Il n’y a aucun script, aucun événement JavaScript, aucune animation cachée. C’est le navigateur qui gère tout automatiquement.

C’est justement ce qui rend :target extrêmement puissant pour les débutants. Vous pouvez créer des interactions visuelles sans une seule ligne de JS.

Exemple simple : mettre en évidence une section

Commençons par un cas très concret. Imaginez une page avec plusieurs blocs.

Voici la structure HTML possible :

<a href="#bloc1">Bloc 1</a>
<a href="#bloc2">Bloc 2</a>

<div id="bloc1" class="bloc">
    <h2>Premier bloc</h2>
    <p>Contenu du premier bloc.</p>
</div>

<div id="bloc2" class="bloc">
    <h2>Deuxième bloc</h2>
    <p>Contenu du deuxième bloc.</p>
</div>

Et le styles CSS qui s’y applique :

.bloc {
    padding: 20px;
    margin: 20px 0;
    background-color: #f2f2f2;
    transition: 0.3s ease;
}

.bloc:target {
    background-color: #ffeaa7;
    border-left: 5px solid #e17055;
}

Quand vous cliquez sur “Bloc 1”, il change de couleur. Si vous cliquez sur “Bloc 2”, c’est lui qui devient actif.

Et le plus intéressant ? Un seul élément peut être ciblé à la fois.

Testez dans l’exemple ci-dessous :

Pourquoi utiliser :target en CSS ?

La pseudo-classe :target a plusieurs usages très intéressants en webdesign.

Elle permet notamment :

• de créer des systèmes d’onglets simples
• d’afficher ou masquer du contenu
• de styliser une section active
• de simuler des modales sans JavaScript
• de créer des FAQ interactives

Autrement dit, :target CSS peut transformer une page statique en interface interactive.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Créer un système d’onglets avec :target

Entrons dans quelque chose d’un peu plus évolué. Imaginez que vous voulez créer des onglets “Présentation”, “Services”, “Contact” sans JavaScript.

Voici un structure HTML :

<nav>
    <a href="#presentation">Présentation</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</nav>

<section id="presentation" class="contenu">
    <h2>Présentation</h2>
    <p>Bienvenue sur notre site.</p>
</section>

<section id="services" class="contenu">
    <h2>Services</h2>
    <p>Découvrez nos prestations.</p>
</section>

<section id="contact" class="contenu">
    <h2>Contact</h2>
    <p>Contactez-nous facilement.</p>
</section>

Et sa stylisation CSS :

.contenu {
    display: none;
}

.contenu:target {
    display: block;
}

Résultat ?

Au chargement, rien ne s’affiche. Dès que vous cliquez sur un onglet, la section correspondante apparaît.

Simple. Propre. Efficace.

Attention cependant : si aucune ancre n’est présente dans l’URL au chargement, rien ne sera visible. Il faudra éventuellement prévoir une section affichée par défaut.

👉 Pour aller plus loin : Onglet ou Tabs en CSS pure avec Grid et Subgrid

Astuce importante : gérer un affichage par défaut

Vous pouvez combiner :target avec un sélecteur comme :not(:target).

Par exemple :

.contenu {
    display: none;
}

.contenu:target {
    display: block;
}

.contenu:first-of-type {
    display: block;
}

Ainsi, le premier bloc est visible par défaut, et les autres s’affichent selon la cible.

Exemple complet en webdesign avec :target css : Une FAQ interactive

Passons maintenant à un exemple plus réaliste : une page FAQ interactive.

L’objectif : cliquer sur une question pour afficher la réponse, avec une transition douce.

Le code HTML complet :

<h1>Foire aux questions</h1>

<div class="faq">
    <a href="#q1" class="question">Qu’est-ce que :target en CSS ?</a>
    <div id="q1" class="reponse">
        <p>:target est une pseudo-classe CSS qui permet de styliser un élément ciblé par une ancre URL.</p>
    </div>

    <a href="#q2" class="question">Peut-on l’utiliser sans JavaScript ?</a>
    <div id="q2" class="reponse">
        <p>Oui, entièrement. C’est même son principal avantage.</p>
    </div>
</div>

Le code CSS complet :

body {
    font-family: Arial, sans-serif;
    background: #f8f9fa;
}

.question {
    display: block;
    padding: 15px;
    background: #2d3436;
    color: white;
    text-decoration: none;
    margin-top: 10px;
}

.reponse {
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease;
    background: white;
    padding: 0 15px;
}

.reponse:target {
    max-height: 200px;
    padding: 15px;
}

Quand vous cliquez sur une question, la réponse se déplie doucement. Vous venez de créer une interaction dynamique uniquement avec la pseudo-classe :target CSS.

Et avouez-le, c’est satisfaisant.

Les limites de la pseudo-classe :target CSS

Soyons honnêtes : :target n’est pas une solution universelle. Voici ses principales limites :

• Un seul élément peut être ciblé à la fois.
• L’URL change à chaque clic (avec le #).
• Si l’utilisateur recharge la page, la cible reste active.
• Il n’y a pas de vraie logique conditionnelle comme en JavaScript.

Malgré cela, pour un site simple, un blog, une landing page, ou même une interface pédagogique, c’est largement suffisant.

Bonnes pratiques SEO et accessibilité

Même si :target est une solution purement CSS, vous devez rester attentif à deux éléments :

• L’accessibilité : assurez-vous que vos liens sont compréhensibles et utilisables au clavier.
• Le SEO : l’utilisation d’ancres peut améliorer la navigation interne et faciliter le crawl des sections importantes.

D’ailleurs, si vous gérez un blog pédagogique comme le Créa-blog, les ancres peuvent être très utiles pour structurer un article long.

---

La pseudo-classe :target en CSS est souvent sous-estimée. Pourtant, elle permet de créer des interactions élégantes, légères et efficaces sans JavaScript. Pour un débutant, c’est une porte d’entrée idéale vers le webdesign interactif.

En maîtrisant :target CSS, vous comprenez mieux le fonctionnement des ancres, des sélecteurs avancés et du comportement du navigateur. Vous ne faites plus seulement “du style”. Vous créez une expérience.

• Et le plus beau dans tout ça ? Vous l’avez fait avec quelques lignes de CSS.

Maintenant, à vous de jouer. Testez, modifiez, expérimentez. C’est en manipulant que vous deviendrez vraiment à l’aise avec :target.