Problème de sélecteur css[Résolu]

Bonjour,

Dans une page, j'ai un div nommé #contenu qui contient lui-même d'autres div auxquels j'applique la classe .formations
Dans #contenu, j'ai une liste de définitions, ainsi que dans les div imbriqués.

Je cherche simplement à donner un style différent à mes deux sortes de listes, en procédant comme suit :

div#contenu dt {
	padding-left: 20px;
	height: 15px;
	line-height: 15px;
	color: #666;
	letter-spacing: 0.1em;
	font-weight: bold;
	background: #fff;
}
div#contenu dd {
	margin-left: 30px;
}

div.formations dt {
	background-color: #fff;
	padding: 0;
	margin: 0;
	border: none;
	border-bottom: 1px solid #ccc;
}

Le dernier sélecteur est ignoré, je suis obligé d'appliquer un id différent à chacun de mes div pour que cela fonctionne (div#formation1).
Est-ce une erreur de syntaxe ?
Merci
Modifié par velvet (25 Jun 2005 - 23:38)

Bonjour,

Effectivement, il semble que la séquence "id > class" pose des problèmes. En revanche "class > class" fonctionne de même que "class > id". On pourrait interpréter ce phénomène en remarquant que la classe est un concept plus large que l'identifiant, et qu'aucun concept ne saurait être inclus dans un concept plus petit..cqfd

Conclusion : #contenu devient .contenu, on adapte l'html en conséquence et hop ça roule

Si j'ai bien compris tu souhaiterais que les termes de définitions contenus dans une division d'id #contenu aient les propriétés que tu souhaites:

div#contenu dt{}

Et que les termes de définitions contenus dans une division d'id #contenu affectées de la classe .formation aient une autre présentation:

div#contenu dt.formation{}

Tout cela dans le cas où tu appliques la classe dur dt. Sans le code html, c'est une réponse à tatons . Il y a peut-être d'autres solutions suivant le code que tu utilises.

l'important c'est de comprendre que rien ne l'emporte sur la sélection par id.

de toute façon tous tes dt sont dans le div#contenu donc c'est les valeurs de celui ci qui s'appliquent.

La solution c'est de moduler le div#contenu lui même.

soit

div#contenu div.formations dt {
 background-color: #fff;
padding: 0;
margin: 0;
border: none;
border-bottom: 1px solid #ccc;
}

++

Merci,

Finalement, je me suis débrouillé autrement : j'ai utilisé deux classes.
Désolé, mais je n'est pas trouvé le bouton éditer pour pouvoir modifier le titre de mon message.

J'étais pas connecté !