Priorité sélection CSS

Bonjour,

Énigme du jour :

voici le code HTML suivant

Code:

---

1 2 3 4 5 6 7

<div id="racine"> <div class="c1"> <div class="c2"> <h3 class="letitre">Ceci est un titre</h3> </div> </div> </div>

---

Auquel est appliqué le CSS suivant

Code:

---

1 2 3 4 5 6 7 8 9 10

<style type="text/css"> #racine h3 { color:blue; }   .c1 .c2 h3.letitre { color:red; } </style>

---

Le rendu du titre h3 est de couleur bleu.

Comment faire pour qu'il soit de couleur rouge :
- Sans mettre #racine au début du sélecteur CSS
- Sans utiliser "!important"
- Sans intervenir sur le premier sélecteur (#racine h3) mais uniquement sur le deuxième.

Donc ni ça :

Code:

---

1 2 3

#racine .c1 .c2 h3.letitre { color:red; }

---

Ni ça :

Code:

---

1 2 3

.c1 .c2 h3.letitre { color:red !important; }

---

Merci de votre aide !

tu peux utiliser directement les tags html et la classe.

Exemple:

Code:

---

1 2 3 4 5 6 7

h3 { color:blue; } h3.letitre { color:red; }

---

Voici un exemple avec ta structure pour que tu puisses voir que cela fonctionne:

Code:

---

1 2 3 4 5 6 7 8 9

<div id="racine"> <h3>ce titre sera en bleu</h3> <div class="c1"> <div class="c2"> <h3 class="letitre">ce titre sera en rouge</h3> </div> </div> </div>

---

Mes excuses pour ce message stupide.

Les réponses se trouvaient là :
http://diythemes.com/thesis/css-specificity-thesis/

ou là:
http://www.webmasterworld.com/css/3805546.htm

En faite, on ne peut pas.

les électeur ID sont plus spécifiques que les sélecteurs CLASS. Donc pris en priorité.

Il n'y a pas de solutions a mon énigme.

Merci, et désolé pour mon message.

tu n'es pas obligé d'utiliser les ID, ce qui enlève la priorité de ceux ci