Concaténer des id ? [Fait]

**Bigalo** · 04/02/2008, 23h45

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body id="home">

Il suffit de modifier ainsi l’id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Kerod** · 05/02/2008, 00h53

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 ?

**Bigalo** · 05/02/2008, 10h35

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<body id="home">

en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body id="home">

provoque le remplacement de

par

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

**pop_up** · 05/02/2008, 10h54

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bigalo** · 05/02/2008, 11h51

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