Cibler en css avec la class

Par SAMO, il y a 7 ans

Les bases HTML/CSS

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, il y a 7 ans

Salut

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

Saint Cyr, il y a 7 ans

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