Nommage et hiéarchie des sélecteurs CSS[Résolu]

Bonjour à tous et à toutes,

Depuis quelques mois je m'initie au CSS. J'ai acheter un bouquin qui en parle mais sans approfondissements, ce que je trouve un peu dommage. Je viens vous visiter régulièrement afin d'appronfondir l'utilisation et le fonctionnement des CSS.

À mon grand désarois, je n'ai cepandant rien trouvé sur le thème des sélecteurs et de la façon de les appeler. À titre d'exemple, dans le tutorial impliquant un menu déroulant, je ne comprends pas le principe de nommage des sélecteurs.

ul#menu ul{
 
  top:-1px;
  left:148px;
}

Cet exemple résume assez bien mon incompréhension à savoir pourquoi ul est-il placé devant menu et par la suite après ?

Une autre interogation implique le symbole > comme dans ici:

ul#menu li:hover>ul

À quoi sert ce symbole ? Qu'elle est sa signification ?


Merci pour vos éclaircissements, j'éprouve certaines difficultés à nommer mes sélecteur dû à ces manques de connaissances...

Yannick Tremblay.
Modifié par akinayotaka (17 Dec 2006 - 23:01)

Salut,

Je t'invite à prendre connaissance ce ce document qui t'en apprendra beaucoup. Il y'a deux autres parties accessibles à partir de celle là, n'hésite pas à les consulter toutes les trois.

Pour les sélecteur qui t'interrogent :

a écrit :
ul#menu ul{

signifie que tu sélectionne toutes les liste ul situées dans une liste ul portant l'identifiant "menu"

a écrit :
ul#menu li:hover>ul

de la même manière que précédemment, celà signifie que tu sélectionne tous les ul enfant des li:hover situés dans une liste ul parente portant l'identifiant menu.
si A et B sont des éléments, A>B signifie que tu sélectionne l'élement A dont le parent est B. Si ce même élément A se situe dans un élément C, il ne sera pas sélectionné.

J'espère que ca t'aidera mais le lien que je t'ai donné t'expliquera tout en détail
Modifié par Mikachu (17 Dec 2006 - 16:52)

a écrit :
Cet exemple résume assez bien mon incompréhension à savoir pourquoi ul est-il placé devant menu et par la suite après ?

Hello l'ordre est celui de la structure HTML : ici, ton sélecteur signifie :
"je cherche tous les <ul> contenus dans l'élément <ul> nommé "menu"".

En clair :
- ul#menu = <ul> nommé (dont l'id est) "menu"
- ul#menu ul = <ul> contenu dans ul#menu

ul#menu li:hover>ul

Là c'est plus complexe puisqu'on a des sélecteurs d'enfant.
Cela signifie :
"je cherche tous les <ul> directement enfants (>) des éléments <li> survolés (:hover) contenus dans l'élément <ul> dont l'id est "menu"".

Tu t'en sors ? L'idée est que l'on commence par le parent, puis on atteint l'enfant.

a écrit :
J'ai acheter un bouquin qui en parle mais sans approfondissements, ce que je trouve un peu dommage

Oh eh bien quel est ce bouquin trop peu approfondi ?

Tous les sélecteurs :
http://www.yoyodesign.org/doc/w3c/css2/selector.html
Modifié par Raphael (17 Dec 2006 - 16:35)

Mikachu a écrit :

ul#menu li:hover>ul

si A et B sont des éléments, A>B signifie que tu sélectionne l'élement A dont le parent est B. Si ce même élément A se situe dans un élément C, il ne sera pas sélectionné.
En fait, l'élément sélectionné est B, enfant de A :
http://www.yoyodesign.org/doc/w3c/css2/selector.html#child-selectors

Pour être plus clair :

A B { ... }

Sélectionne l'élément B descendant de A

A > B { ... }

Sélectionne l'élément B enfant de A

La différence entre en descendant et un enfant, est que l'enfant est obligatoirement contenu directement dans l'élément parent (pas de conteneur intermédiaire).

Wow ! joli la tuque...

Merci à vous deux pour les infos, je vais étudier ces documents attentivement, c'est très sympa, ca m'évite des heures de recherches laborieuses...

Le bouquin est: site web dynamique; une guide complet, chez micro application...

C'est une belle introduction à la chose, sans plus. Remarque que pour un débutant, c'est très bien.

Question enfant ou descendant, tout enfant n'est-il pas descendant ? La fonction enfant deviendrait alors inutile, non ?

Wobibabloubo bye !

akinayotaka a écrit :
Question enfant ou descendant, tout enfant n'est-il pas descendant ? La fonction enfant deviendrait alors inutile, non ?

Oui l'enfant est descendant. Sauf qu'il est le descendant direct.
Dans certains cas il est bien utile de préciser que seul le descendant direct doit être appliquer par la régle CSS.

Alors qu'un simple descendant peut se trouver à n'importe quel niveau.

Voici une très bonne documentation sur la hiérarchie des éléments CSS : http://css.maxdesign.com.au/selectutorial/document_tree.htm
Modifié par Ptitfox (17 Dec 2006 - 18:34)

Bonjour P'tit fox !

Oui, tu as bien raison. Je viens de voir un exemple relaté à cela dans un des liens fournit précédemment...

Bonne journée par chez-vous didlidou !

Yannick

akinayotaka a écrit :
Oui, tu as bien raison. Je viens de voir un exemple relaté à cela dans un des liens fournit précédemment...

Ta question a trouvé une réponse ?
Ton problème est [Résolu] alors