[Resolu] Conflit de propriétés - Règles de spécificités

(reprise du message précédent)

Igor a écrit :
Bonsoir,
Tu pourrais t'épargner une div avec #menu, ul est déjà un élément de type bloc, si tu utilises un id c'est donc qu'il a vocation à être unique.
Je te proposerais une notation du genre:

ul#menu{}
ul#menu li{}
ul#menu li a{}
ul#menu li a:hover{}

Tu ne styleras dans ce cas que la liste ayant pour id menu.

Si, cela vous interesse :

Résolu, après élimination du div et simplification, mais la déclaration proposée ne marche pas, celle qui fonctionne est :

#menu{}
#menu li{}
#menu li a{}
#menu li :hover{}

Parce que l'id menu est déjà appliqué à l'élément ul, sans doute ?

#menu li a:hover ne marche pas, il faut supprimer le a ... ?
Pourquoi ? ... pour un prochain épisode !

Voilà, ne cherchez plus

Modifié par Vero (24 Feb 2005 - 10:21)

En apparté : il n'est bien entendu pas possible de styler les messages du forum en utilisant les styles CSS.

jb_gfx a écrit :
En apparté : il n'est bien entendu pas possible de styler les messages du forum en utilisant les styles CSS.

Je voulais juste savoir si il était possible d'indenter du texte dans un message ... Cette question subsidiaire n'a peut-être pas été comprise ... comme le reste d'ailleurs ...

J'étais sceptique quant aux feuilles de style ...
Pour le reste, je demeure incomprise , mais avec un peu de suite dans les id , je trouverais sûrement un jour la réponse à ma question.

Merci d'être passé par là, cela fait toujours plaisir d'avoir de la visite !

Vero a écrit :
#menu li a:hover ne marche pas, il faut supprimer le a ... ?
Pourquoi ?

Rapidement, à la vue de la CSS citée ci-dessus: c'est apparemment un simple problème de spécificité des sélecteurs. En effet:

- #menu li a:hover a une spécificité de 0103 (un id, pas de classes, 2 éléments + un pseudo-élément)
- plus bas dans ta CSS, a#toto1:hover et les autres sélecteurs du même type ont une spécificité de 0102 (un id, pas de classes, 1 élément + 1 pseudo élément)

C'est donc, en cas de conflit entre ces deux sélecteurs, le #menu li a:hover qui l'emporte. Or celui-ci contient la propriété background-position: left top;, qui annule de ce fait le background-position: 0% -342px; spécifiés pour a#toto1:hover... Je n'ai pas lu ce fil en détail, mais je suppose que c'est le background qui clochait ? En fait, ce background-position: left top; sert-il à quelque-chose ?

Lorsque tu transforme ton sélecteur en li a:hover {}, tu diminue sa spécificité, qui passe à 0003 (2 éléments + un pseudo-élément). Les a#toto1:hover etc. qui "pèsent" 0102 peuvent alors être appliqués.
Modifié par Laurent Denis (24 Feb 2005 - 08:47)

Vous êtes fantastique !
Enfin une piste d'investigation concrète ! Je vais tester l'intérêt de la propriété background.
Je me doutais qu'un conflit était à l'origine du problème ... et je voulais simplement mettre le doigt dessus et comprendre ...
Par ailleurs, j'ai lu ces histoires de spécificités ...
Mais rien de tel que l'exemple pour intégrer une notion !

Par ailleurs, puique j'ai la chance de vous avoir un peu :

Quelle différence entre :

#menu element {}
et
element#menu {}

A priori, il y en a une, puisque, au travers cet exemple, la première fonctionne, l'autre non. En lisant les specs, je perçois une nuance, mais c'est peut-être une interprétation.

D'autre part, pourquoi #menu li :hover fonctionne et non #menu li a:hover ?
Autre formulation de la question : Le fait que cela fonctionne sans le "a", est une relation de cause à effet, ou dois je intégrer autre chose concernant les pseudos classes ?

J'ai besoin de vos lumières ...

Des millions de merci !

Vero a écrit :

Quelle différence entre :

#menu element {}
et
element#menu {}

La première va concerner les balises 'element' qui sont dans #menu :

<truc id="menu">
  <element></element>
  <element></element>
  <element></element>
</truc>

Le style va s'appliquer aux <element>.

La deuxième va s'appliquer à l'élément qui a pour balise 'element' et comme id 'menu' :

<element id="menu"></element>

Modifié par FlorentG (24 Feb 2005 - 09:54)

Bon, en essayant de pédaler à mon rythme :

Z'avais donc bien compris l'histoire :
Mais, au risque de passer pour une pénible qui pose trop de questions :

Quel est donc l'intérêt de element#menu, puisque le sélecteur id est unique ?
Gérer une exception sur un élément particulier ?

[mode humour on :] Les jeux de mollets font les jambettes !

Vero a écrit :
Quel est donc l'intérêt de element#menu, puisque le sélecteur id est unique ?
Gérer une exception sur un élément particulier ?

À mon humble avis (ou AMHA pour les fanatiques du <span lang="SMS" />), c'est pour plus de clarté dans les feuilles de style. Si tu crées une liste

<ul id="navigation">
<li>Item 1</li>
<li>Item 2</li>
<li>etc ...</li>
</ul>

à laquelle tu appliques certaines propriétés CSS (comme list-sytle-type, qui n'a de sens que sur des éléments "ul"), il est plus clair (et ça ne coûte que deux caractères, de surcroît) d'écrire

ul#navigation {
    property: value; /* Propriétés appliquable qu'à un "ul" "/
}

que d'écrire

#navigation {
    property: value;
}

À mon avis, juste plus clair !

@+, HoPHP

P.S. Ouéééé, 200ème post
Modifié par HoPHP (24 Feb 2005 - 14:15)

J'avais presque envie de créer un nouveau topic, car en démarrant celui-ci, je ne savais pas trop ou j'allais. Je l'ai renomé en "conflit de propriétés - pb de spécificité", mais il amène d'autres questions.

Que nous conseille les modérateurs :

Un nouveau topic : mettre de l'ordre dans ses ID ?
En reprenant les dernières questions ...
Dans quel forum ?

Vero a écrit :
J'avais presque envie de créer un nouveau topic, car en démarrant celui-ci, je ne savais pas trop ou j'allais. Je l'ai renomé en "conflit de propriétés - pb de spécificité", mais il amène d'autres questions.

Que nous conseille les modérateurs :

Le plus simple pour tout le monde et aussi pour les futures "recherches", c'est un sujet par question. Bien sur il arrive que les modifications apportées au code dévient le sujet initiale, et c'est normal.

Mais lorsqu'une solution est apportée à une question, il faut mettre un "Résolu" dans le titre et poser une nouvelle question dans un autre post

... Est-ce que ça répond à ta question ?

dominique a écrit :

.. Est-ce que ça répond à ta question ?

Cela me confirme et le topic est déjà resolu.
L'idée est de reprendre les 2 derniers posts : je repose ma question, mais HoPhp a commencé à y répondre ... et sa réponse est intéressante.
Je copie colle en signalant ?

Merci Dominique de m'aider à avoir les bons réflèxes.

Ben ! là, si la réponse est complète ou presque, c'est un peu tard
mais pas grave.

Il est préférable là de laisser comme ça, mais si tu as une autre question ensuite, qui sort du thème initiale, il est préférable d'ouvrir un nouveau sujet

Vero a écrit :
Quel est donc l'intérêt de element#menu, puisque le sélecteur id est unique ?
Gérer une exception sur un élément particulier ?

Exactement. L'idée générale en CSS est de jouer sur la priorité des sélecteurs. Dans une CSS "screen", ce type de sélecteur permettra de simplifier le code CSS en définissant un comportement général pour l'élément dans tout le document, tout en réservant un comportement propre à une occurence unique. Il peut aussi servir, plus souvent, à gérer la cascade de deux feuilles de styles combinées (une appliquée à tous les media, et l'autre à un media particulier, ou une permanente et une alternative, etc.)

Voilà qui m'encourage à continuer à les lire ces specifications ... même si, pour l'instant, je ne suis pas sûre de tout comprendre.
Il y a bien une raison à tout et je ne regrette pas d'avoir posé mes valises 5 minutes. Il est certes plus facile de contourner les problèmes, mais c'est peu satisfaisant.

Merci encore Laurent Denis pour cet efficace coup de pouce.