Héritage entre class et ID

Tout d'abord, bonjour à tous,

Cela fait un moment que je connais les bonnes pages d'alsacréations. J'ai commencé le web en amateur (en apprenant beaucoup ici notamment) puis finalement, c'est devenu ma profession (intégrateur).

C'est pas pour vous raconter ma vie que je dis tout ça bien sur mais parce que je viens de découvrir un étrange comportement. Ayant appris sur le tas, je n'ai jamais fait attention ou rencontré ce problème avant.

J'attribue à ma balise P des marges pour un élément avec un ID mais je souhaite que les marges soient à 0 pour un élément enfant avec une CLASS. Et là patatra, mon style ne s'applique pas alors qu'il est attribué à un élément enfant ?
J'ai bien lu l'article dans héritage CSS mais rien la dessus. J'ai aussi remarqué que si je changeais l'ID pour une CLASS, le style s'appliquait bien.
Quelqu'un pourrait il m'expliquer le pourquoi du comment de ce comportement qui donne un pouvoir plus grand aux ID sur leurs enfants ?

Merci de votre aide,

Pour l'exemple :

Le HTML :

<div id="container">
<div class="text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

Le CSS :

#container p {
margin: 1em 0;
}

.text p {
margin: 0;
}

Voila une page d'exemple :

http://enorak.free.fr/test.html

Bonjournicolas69,

Peut-être une question de priorités des sélecteurs ?

Que donnerait ceci par exemple <,

#container div.text p {
margin:0;
}

Cdt,
Sylvain

Merci pour ta réponse sylvain !

J'avais déjà noté qu'en mettant simplement

#container .text p {
margin:0;
}

cela fonctionnait aussi. Je trouve juste cela un peu bizarre comme comportement quand on considère la logique des autres comportements d'héritages CSS dont la règle assez commune veut que si le même élément est défini dans l'enfant, alors celui-ci prévaut sur le dit élément défini dans la parent (je suis clair ? ).

A part la répétition dans une page, je ne savais pas qu'il existait une différence de comportement de priorité entre CLASS et ID.

Mon style souhaité marcherait si j'avais par exemple :

.container p {
margin: 1em 0;
}

.text p {
margin:0;
}

En tout cas merci encore, j'y vois plus clair maintenant et je vais pour le coup améliorer mon reset en fontion.

nicolas69 a écrit :
Je trouve juste cela un peu bizarre comme comportement quand on considère la logique des autres comportements d'héritages CSS dont la règle assez commune veut que si le même élément est défini dans l'enfant, alors celui-ci prévaut sur le dit élément défini dans la parent (je suis clair ? ).

Non, tu n'es pas clair car tu utilises le terme «élément» pour parler en réalité d'une propriété CSS. Les éléments, c'est en HTML (élément parent, enfant, etc.).

Et je ne vois pas de comportement illogique. Il s'agit de deux choses différentes:
1. l'héritage des propriétés CSS du parent et des ancêtres d'un élément;
2. la priorité des différents sélecteurs qui s'appliquent à un même élément.

Dans les deux cas, c'est un principe de «spécificité» qui est appliqué.
1. Un style attribué à un élément a la priorité sur un style hérité du parent. Un style hérité du parent a la priorité sur un style hérité d'un ancêtre plus lointain.
2. Ce qui peut surprendre dans le cas de la priorité des sélecteurs, c'est que la spécification définit les sélecteurs d'identifiant comme plus spécifiques que les sélecteurs de classes. Même si dans ton esprit p.special est plus spécifique que #global p, c'est bien le deuxième qui est prioritaire par principe, car le navigateur aurait du mal à déterminer si p.special correspond à quelque chose de très précis ou de très large, et si #global p correspond à toute une tripotée de paragraphes ou au contraire un paragraphe très précis dans un élément précis de la page. Le navigateur pourrait essayer d'utiliser un autre système pour déterminer la priorité des sélecteurs, mais ça serait sans doute trop lourd ou pas assez prévisible pour les utilisateurs. Avec la convention actuelle (celle de la spécification, implémentée par les navigateurs), les comportements ont une logique et sont prévisibles.

<troll>

nicolas69 a écrit :
j'y vois plus clair maintenant et je vais pour le coup améliorer mon reset en fontion

Les Reset CSS, saimal.
</troll>
Modifié par Florent V. (30 Oct 2008 - 15:08)

Salut !

Finalement c'est assez clair, quand je dis "le même élément défini dans l'enfant", je me traduis > la balise P (ou autre) se voit appliqué un style dans un conteneur enfant.

Merci pour ta réponse en tout cas. Ton point 2 est éclairant sur le sujet.
L'illogisme que je pointais était de savoir pourquoi

#content .text p {}

n'était pas égal en terme de priorité à

.content .texte p {}

J'ai maintenant l'explication.

Merci bien !