Priorité sélection CSS [Résolu]

[fabienhespul]

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 !

[ornitho13]

tu peux utiliser directement les tags html et la classe.

Exemple:

Code css :

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 html :

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>

[fabienhespul]

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.

[ornitho13]

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