3. Cibler un élément¶

Vous l'avez compris, avec l'héritage des propriétés, l'un des plus gros challenges en CSS est de bien cibler son sélecteur. Pour cela, plusieurs sélecteurs nous sont mis à disposition.

X Y¶

Il est possible de cibler un élément contenu dans un autre élément. Par exemple, si j'ai un paragraphe dans une <div> et un autre à l'extérieur :

<div>
    <p>
        Un super paragraphe dans une div.
    </p>
</div>
<p>
    Un mega paragraphe solo.
</p>

Pour cibler uniquement le paragraphe dans ma div, je vais utiliser :

div p {
    color: red;
}

Ce qui me donne :

X > Y¶

Dans le cas où j'aurais plusieurs éléments imbriqués de même nature compris dans ma <div>, je peux utiliser > pour cibler celui qui est imbriqué directement après mon élément référent.

Par exemple, j'ai ici :

• un paragraphe hors de ma <div>,
• un paragraphe directement dans ma <div>,
• un paragraphe dans une section qui est comprise dan ma <div>.

<div>
    <p>
        Un super paragraphe dans une div.
    </p>
    <section>
        <p>
            Un super paragraphe dans une section qui est dans une div.
        </p>
    </section>
</div>
<p>
    Un mega paragraphe solo.
</p>

Pour cibler uniquement le paragraphe dans ma <div>, sans impacter celui présent dans la <section>, je vais ajouter un > dans mon CSS :

div > p {
    color: red;
}

Voilà le résultat :

X + Y¶

Le sélecteur + permet de cibler un élément placé directement après un autre. Par exemple, nous allons cibler uniquement les paragraphes situés directement après les titres de niveau 2 :

<h2>
    Un titre de niveau 2
</h2>
<p>
    Un super paragraphe rouge.
</p>
<p>
    Un super paragraphe.
</p>
<h2>
    Un titre de niveau 2
</h2>
<p>
    Un super paragraphe rouge.
</p>

h2 + p {
    color: red;
}

Voilà le résultat :

X ~ Y¶

À la différence du +, le sélecteur ~ permet de cibler n'importe quel élément Y qui se trouve derrière l'élément X. Par exemple, nous allons ici cibler tous les paragraphes situés derrière les balises <h2> (et pas seulement ceux situés directement après).

<p>
    Un super paragraphe.
</p>
<h2>
    Un titre de niveau 2
</h2>
<p>
    Un super paragraphe rouge.
</p>
<p>
    Un super paragraphe rouge.
</p>
<h3>
    Un titre de niveau 3
</h3>
<p>
    Un super paragraphe rouge.
</p>

h2 ~ p {
    color: red;
}

Résultat, seul le paragraphe situé avant le premier <h2> n'est pas ciblé :