Forum : Cibler en css avec la class

Bonjour la communauté des lumières j'ai besoin de votre aide,

<div class='titre'><div>
<div> Cette balise peux varier de position <div>
<div class='titre'><div>

.titre:nth-child(1){  background:blue }
.titre:nth-child(2){ background:red }

Ce que je veux

Je cible les balise avec la class title la premier je lui donne un background blue et l'autre un background red , mais le problème c'est que la balise au millieux peux changer de position donc utilisé nth-child cible mal et je ne veux pas donner 2 class différente au balise title ( A cause d'une contrainte ) .

Donc ce que je cherche c'est de pouvoir cibler par apport a la class title .

Exemple pouvoir cibler la première balise avec la class title rencontrer dans le dom et ensuite cibler la deuxième balise pour leur donner des couleur différentes

Merci Beaucoup .

2 réponses

TokaLazy

Réponse acceptée

Salut

Au lieu de nth-child, utilise nth-of-type

Saint Cyr

Salut, déjà pour mieux structurer je te conseille d'utiliser un(ou une) div parent.

<div class="parent">
    <div class="title">Titre en rouge</div>
    <div>Bloc qui change de position</div>
    <div class="title">Titre en bleu</div>
</div>

En css, si c'est cette structure(juste 2 div avec class "title") que tu veux utiliser. Tu peux utiliser:

.title:first-of-type{}
.title:last-of-type{}

Cf:https://developer.mozilla.org/fr/docs/Web/CSS/:first-of-type