Discussion :

[fabienhespul]

Bonjour,

Énigme du jour :

voici le code HTML suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ni ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci de votre aide !