Concaténer des id ?

Version imprimable

Concaténer des id ?

Bonjour,

J’ai découvert avec intérêt ce tutoriel, qui, à partie d’une liste :
Code:

1 2 3 4 5 6 7 8 <ul id="nav"> <li id="nav-home"><a href="#">Accueil</a></li> <li id="nav-about"><a href="#">A propos</a></li> <li id="nav-archive"><a href="#">Archives</a></li> <li id="nav-lab"><a href="#">Laboratoire</a></li> <li id="nav-reviews"><a href="#">Critiques</a></li> <li id="nav-contact"><a href="#">Contact</a></li> </ul>
aboutit par l’application exclusive de CSS à une belle barre de navigation horizontale :

http://www.la-belle-histoire.fr/images/Etapes10et11.jpg

La couleur de fond d’Accueil semble conditionnée par l’id associé à la balise Body :

Code:

<body id="home">

Il suffit de modifier ainsi l’id :

Code:

<body id="about">

pour que ce soit la boite A propos qui récupère la couleur de fond brique à la place d’Accueil.

grâce apparemment à cet élément de la feuille de style
Code:

1 2 3 4 5 6 7 8 9 10 #home #nav-home a, #about #nav-about a, #archive #nav-archive a, #lab #nav-lab a, #reviews #nav-reviews a, #contact #nav-contact a { background:#e35a00; color:#fff; text-shadow:none; }
Peut-on en déduire que le tiret entre nav et home, ou about, id de la balise Body fonctionne comme un opérateur de concaténation qui fait que dans un cas c'est la boite dont l'id est nav-home, dans l’autre celle dont l'id est nav-about, qui se distingue par une couleur de fond spécifique ?

05/02/2008, 00h53
Kerod

Non pas du tout. Ici le - n'a aucun effet sur le CSS. C'est tout simplement un élément du nom de l'identifiant.

Si tu remplaces les id par d'autres ou si tu retires le - tu auras toujours le même résultat.

Est-ce que c'est bien ce que tu voulais savoir ?
05/02/2008, 10h35
Bigalo

Merci de ta réponse, mais alors quel est le mécanisme ? Voici la fin du tutoriel :

Citation:

Dans l'étape finale, j'ai ajouté des règles qui donneront un aspect différent au lien sélectionné, afin de montrer aux visiteurs où ils se situent dans le site.

Dans l'hypothèse où vous n'auriez jamais vu auparavant un exemple de spécification d'attribut id pour l'élément body afin de donner un aspect différent au lien de navigation courant, sachez que cela est effectué par les deux première règles. Dans les exemples montrés dans cet article, j'ai donné à l'attribut id de l'élément body la valeur "home", ce qui fait du lien "Home" le lien courant. Si vous changer cet id en "about", le lien "About" sera le lien courant, et ainsi de suite...

J'ai également fait en sorte que le lien sélectionné reste le même lorsqu'on le survole avec la souris. On peut aussi se demander si l'élément courant dans le menu devrait carrément ne pas être un lien. Dans ce cas, j'ai choisi de le laisser sous la forme d'un lien et d'utiliser CSS pour enlever le retour visuel à son survol.

Pour donner aussi un retour visuel lorsqu'on clique sur l'un des liens, j'ai donné à l'état :state la même apparence que le lien sélectionné :

Code css :
#home #nav-home a, #about #nav-about a, #archive #nav-archive a, #lab #nav-lab a,
#reviews #nav-reviews a, #contact #nav-contact a
{
background:#e35a00;
color:#fff;
text-shadow:none;
}

#home #nav-home a:hover, #about #nav-about a:hover, #archive #nav-archive a:hover,
#lab #nav-lab a:hover, #reviews #nav-reviews a:hover, #contact #nav-contact a:hover
{
background:#e35a00;
}

#nav a:active
{
background:#e35a00;
color:#fff;
}

Je n’arrive toujours pas à comprendre quelle est la règle qui fait que le lien courant (celui dont l'id est égal à nav- complété par l'id de body) a une couleur de fond distincte :

Modifier ce seul élément :

Code:

<body id="home">

en

Code:

<body id="home">

provoque le remplacement de

http://www.la-belle-histoire.fr/images/etape12.jpg

par

http://www.la-belle-histoire.fr/images/etape13.jpg

Je suis peut-être particulièrement peu doué, mais je ne comprends pas quelle règle provoque cela :(

c'est bien cette propriété dans le css qui gère la couleur orange :
Code:

1 2 3 4 5 6 7 8 9 10 11 #home #nav-home a, #about #nav-about a, #archive #nav-archive a, #lab #nav-lab a, #reviews #nav-reviews a, #contact #nav-contact a { background:#e35a00; color:#fff; text-shadow:none; }
ici c'est la propriété des élément en cascades qui fait que cela défini lequel sera orange.

Si ton body à l'id "home alors la ligne #home #nav-home a, est vérifiée et permettra de donner la couleur orange au lien de l'élément nav-home. En revanche dans ce cas la, les autre ligne ne sont pas vérifié (ex:pour la ligne #archive #nav-archive a il n'existe pas d'élément #nav-archive enfant d'un id #archive.)

en espérant avoir répondu a ta question

;)

05/02/2008, 11h51
Bigalo

Merci pop_up.

Cela signifie donc que #A #B signifie élément B enfant de élément A : l'espace est ainsi un opérateur de généalogie ?

Je suis toujours un débutant en matière de CSS, mais j’ai au moins découvert un nouveau concept important 8-)
05/02/2008, 12h02
franculo_caoulene

Citation:

Envoyé par Bigalo

Cela signifie donc que #A #B signifie élément B enfant de élément A : l'espace est ainsi un opérateur de généalogie ?

pour être précis c'est un descendant de #A (un enfant étant aussi un descendant)
05/02/2008, 14h20
Bigalo

Merci bis.
06/02/2008, 07h49
Pierre1111

C'est en effet très intéressant.

Une petite question : en quoi le sélecteur N# M# est-il différent de N# > M# hormis le fait que ce dernier ne soit pas reconnu par IE ?

#N #M veut dire #M est un descendant de #N
Code:

1 2 3 <div id="N"> <p id="M"></p> </div>
ou
Code:

1 2 3 4 5 <div id="N"> <div ="coucou"> <p id="M"></p> </div> </div>
sont vrais
-----------------------------
#N > #M veut dire #M est une enfant de #N
Code:

1 2 3 <div id="N"> <p id="M"></p> </div>
est vrai
Code:

1 2 3 4 5 <div id="N"> <div ="coucou"> <p id="M"></p> </div> </div>
est faux

06/02/2008, 09h59
Pierre1111

Merci pour cette précision.