28220 sujets

CSS et mise en forme, CSS3

[Résolu] Comment définir un sélecteur universel sur une classe ?

Bonjour à tous !

Je me demande bien comment faire fonctionner le sélecteur universel sur une classe ?
Dans mon cas je veux simplement réinitialiser tout ce qui se trouve à l'intérieur d'une classe avant d'y déclarer de nouveaux styles indépendants.

Le code sera certainement plus explicite. J'ai simplifié au maximum le problème en n'intervenant que sur la couleur du texte de la balise p.

Voici mon code html :

<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style1.css" />
		<link type="text/css" rel="stylesheet" href="style2.css" />
	</head>
	<body>
		<div class="style1">
			<p>CONTENU STYLE 1</p>
			<div class="style2">
				<p>CONTENU STYLE 2</p>
			</div>
		</div>
	</body>
</html>


Ma première feuille de style (style1.css) :

.style1 p{
	color: red;
}


Ma seconde feuille de style (style1.css) :

.style2 *{
	color: blue;
}


Dans cet exemple la couleur du style2 ne prend pas le dessus sur le syle1.

Le plus étrange c'est que tout fonctionne correctement lorsque dans ma 2ème css je précise ma balise p :

.style2 p{
	color: blue;
}


Bref pourquoi 
.style2 *
n'englobe pas 
.style2 p
ou n'importe quelle autre balise ???

La solution 
div.style2 *
ne fonctionne hélas que pour firefox, et il me faut une compatibilité maximale.

D'avance merci pour vos suggestions Smiley smile
Modifié par Fonzie (16 Jan 2006 - 12:24)
Bonjour !

Effectivement je semble bien comprendre ton problème... mais hélas je n'ai pas la solution...
Je suppose que tu ne peux pas utiliser les ID...

Mais alors, y-a-t-il moyen de redéfinir toutes les balises d'une classe avec de nouvelles valeurs par défaut ?

Ce sujet est très intéressant Smiley biggrin

Cordialement,
Emmanuel
Merci Emmanuel,
même si je n'ai pas spécialement envie d'utiliser des id pour appliquer des styles, j'ai qand même essayé, en vain...
Bonjour,

C'est un simple problème de spécificité des sélecteurs CSS:
- .style1 p : une classe + un élément => spécificité = 0011
- .style2 * : une classe + 0 élément => spécificité = 0010 (le sélecteur universel a un poid de zéro dans le calcul de la spécificité).

....style2 * est donc moins spécifique que .style1 p et ne peut pas le supplanter, même placé après lui.

En revanche, avec :
- .style1 p : un élément + une classe => spécificité = 0011
- style2 p : un élément + une classe => spécificité = 0011

... Cette fois, les deux sélecteurs ayant la même spécificité, c'est le dernier dans l'ordre linéaire HTML qui l'emporte.

Pour obtenir ce que tu souhaites, il suffit d'augmenter la spécificité du second sélecteur, par exemple avec :

.style1 .style2 * {
color: blue;
}


En effet:
- .style1 p : une classe + un élément => spécificité = 0011
- .style1 .style2 * : deux classes + 0 élément => spécificité = 0020

Voir http://openweb.eu.org/articles/cascade_css/ sur la cascade CSS et la spécificité des sélecteurs.
Modifié par Laurent Denis (16 Jan 2006 - 12:20)
Merci beaucoup Laurent Smiley biggrin
Je ne pensais pas que ça pouvait être aussi pointu... et je suis bien soulagé d'avoir pu obtenir une réponse !

Je reviendrais de temps en temps pour rendre l'appareil à mon tour Smiley ravi
Sujet clos
Aller à