Signification de #menu li li a

**laurentSc** · 07/07/2014, 16h58

Bonjour,

je suis en train de réviser des trucs CSS et dans #menu li li a, je me demande quel le sens de "a"...

Le code CSS un peu plus complet est :

Code css :

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

1
2
3
#menu li li a {
    background: lightblue;
}

Le html qui va avec est

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="menu">
    <ul>
        <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-Menu 1</a></li>
                <li><a href="#">Sous-Menu 2</a></li>
                <li><a href="#">Sous-Menu 3</a></li>
            </ul>
        </li>
etc.

**Bisûnûrs** · 07/07/2014, 17h10

Heu, à ton avis ...?

**laurentSc** · 07/07/2014, 17h29

OK, la réponse semble assez évidente, mais si je l'ai posée, c'est que je voyais pas pourquoi

Code :

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

1
2
3
#menu li li {
    background: lightblue;
}

n'aurait pas marcher (donc idem sans le "a") ; visiblement, non, mais je ne vois pas l'explication...

**Bisûnûrs** · 07/07/2014, 17h32

Bon ... dans #menu li li à quoi correspond li ?

**tdutrion** · 07/07/2014, 17h37

Bonjour,

Le a cible le lien (balise a), qui par défaut doit probablement avoir la couleur de fond blanc ou transparent (j'opterais pour transparent mais je suis pas sur de l'info).

Si tu ne mets pas le 'a', la couleur de fond s'applique au li, mais le a a toujours sa valeur initiale, donc on ne voit pas la différence...

Le mieux pour toi serait d'utiliser l'inspecteur d'élément de ton navigateur pour mieux comprendre.

Pour répondre précisément à ta question précédente, lis le dom dans l'ordre : id menu, puis li, puis li (donc li qui entrourrent le a)

**laurentSc** · 07/07/2014, 17h39

Selon moi le li d'un li d'un élément d'identifiant "menu" ; sauf qu'un lien dans un li, comme ça fait aussi parti du li, je vois pas pourquoi ça ne va pas...

**Muchos** · 07/07/2014, 18h06

Je pense que c'est (encore) un faux problème.

Avec juste le code donné, le background s'applique bien, sans ajouter A dans la règle CSS (comme dit Théocrite, le background-color par défaut est transparent).

Je suppose donc que les liens sont INLINE ou flottant, et qu'une couleur de fond est appliqué aux liens, autre part dans la CSS.

**laurentSc** · 07/07/2014, 23h07

Muchos, là, il n'y a pas de problème ; j'essaye juste d'y voir clair.

Et tu as raison pour la couleur de fond des liens, mais pas pour le inline ou le float :

Code css :

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

1
2
3
4
5
6
7
#menu li a {
    display: block;
    padding: 10px 0;
    width: 150px;
    line-height: 20px;
    background: grey;
}

(et ce n'est pas écrasé plus loin) C'était quoi ton raisonnement ?

Et Théocrite, je vois pas ce qu'il peut apporter ici l'inspecteur d'élément...

**Bisûnûrs** · 08/07/2014, 08h39

Bon là je suis paumé. C'est quoi la vraie question ? C'est quoi le problème ?

**tdutrion** · 08/07/2014, 10h49

Envoyé par laurentSc

Et Théocrite, je vois pas ce qu'il peut apporter ici l'inspecteur d'élément...

Et bien voila... Faut juste apprendre a utiliser les outils

Nom : dev01.png
Affichages : 640
Taille : 142,9 Ko

Si tu inspectes ton lien, contrairement a mon image tu auras un autre bloc au dessus (celui que tu as mis dans ton dernier message), et ton background lightblue sera barre car override par l'autre...

**Muchos** · 08/07/2014, 20h30

Que vient faire #menu li a { display: block; background: grey; } dans le problème ?!

**laurentSc** · 08/07/2014, 21h27

Muchos, c'était pour répondre au post #7, sachant que dans la CSS, c'est le seul endroit où sont définis l'attribut DISPLAY et la couleur de fond des liens.

L'outil "inspecteur d'élément", c'est sûr que je ne le connais pas du tout, et notamment, c'est exact que dans la CSS, il y a des parties barrées, mais peut-on m'en donner l'explication sachant que je ne capte pas celle de #10 ?

**Muchos** · 08/07/2014, 21h42

c'est le seul endroit où sont définis l'attribut DISPLAY et la couleur de fond des liens

Voilà sans doute pourquoi le background de LI n'est pas visible, puisque le lien prend l'ensemble de son parent ><

Ajouter #menu li { padding: 1ex; } devrait révéler le background bleu derrière le lien.

**laurentSc** · 09/07/2014, 18h51

Envoyé par Muchos

Voilà sans doute pourquoi le background de LI n'est pas visible, puisque le lien prend l'ensemble de son parent

C'est quoi le raisonnement ?

**NoSmoking** · 09/07/2014, 19h04

Bonjour,
je suis un peu comme Bisûnûrs paumé ...

Pourrais tu exposer clairement ton problème et/ou tes angoisses pour que l'on puisse t'aider correctement, je crois que tout le monde y gagnerait

**laurentSc** · 09/07/2014, 19h16

Il n'y a pas de problème ni d'angoisse mais juste un gros manque de compréhension.

En gros, si l'on regarde le code donné dans le post #1 puis celui de #3, je ne comprends pas pourquoi le CSS de #1 fonctionne et pas celui de #3 (malgré les explications fournies et apparemment faute de savoir tirer parti de l'inspecteur d'élément de Firebug).

**NoSmoking** · 09/07/2014, 21h43

je ne comprends pas pourquoi le CSS de #1 fonctionne et pas celui de #3

cela ne reste pas clair pour autant mais je me lance...
post #1

Code :

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

1
2
3
#menu li li a {
    background: lightblue;
}

le style va s'appliquer à un élément A contenu dans un élément LI contenu dans un élément LI contenu dans un élément dont l'ID est menu.

Les éléments A étant par défaut en display:inline, seule la partie "utile" se verra appliquer un background: lightblue.

post #3

Code :

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

1
2
3
#menu li li {
    background: lightblue;
}

le style va s'appliquer à un élément LI contenu dans un élément LI contenu dans un élément dont l'ID est menu.

Les éléments LI étant par défaut en display:list-item et ayant donc une largeur par défaut égale à 100% de leur conteneur, la totalité de l'élément se verra appliquer un background: lightblue.
Les éléments contenus dans celui ci, et à défaut de définition d'un background personalisé, auront par défaut le background du parent, cela est toujours vrai d'ailleurs.

Exemple illustrant le propos

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
#menu1 li li a {
    background: lightblue;
}
#menu1 li li {
    background: blue;
}
#menu2 li li {
    background: lightblue;
}
</style>
<script>
</script>
</head>
<body>
<div id="menu1">
    <ul>
        <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-Menu 1</a></li>
                <li><a href="#">Texte du Sous-Menu 2</a></li>
                <li><a href="#">Sous-Menu 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="menu2">
    <ul>
        <li><a href="#">Lien 2</a>
            <ul>
                <li><a href="#">Sous-Menu 1</a></li>
                <li><a href="#">Sous-Menu 2</a></li>
                <li><a href="#">Sous-Menu 3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

(malgré les explications fournies et apparemment faute de savoir tirer parti de l'inspecteur d'élément de Firebug).

Il arrive que pour savoir il faut vouloir

**laurentSc** · 09/07/2014, 22h15

Merci pour ton effort d'explication avec un exemple (j'adore les exemples). Je regarderai plus tard (un match de foot à pas louper !).

Mais pas compris ça :

Il arrive que pour savoir il faut vouloir

**laurentSc** · 10/07/2014, 19h59

Je viens de regarder l'exemple et il ne correspond pas exactement au cas que je cherche à élucider...J'ai rajouté un 3e cas un peu différent.

Pourrais-tu me le décortiquer comme tu avais fait précédemment ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
 
#menu1 li a {
    background: grey;
}
#menu1 li li {
    background: lightblue;
}
 
#menu2 li a {
    display: block;
    background: grey;
}
 
#menu2 li li a{
    background: lightblue;
}
 
#menu3 li a {
    display: block;
    background: grey;
}
 
#menu3 li li{
    background: lightblue;
}
</style>
</head>
<body>
 
<div id="menu1">
    <ul>
        <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-Menu 1</a></li>
                <li><a href="#">Sous-Menu 2</a></li>
                <li><a href="#">Sous-Menu 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="menu2">
    <ul>
        <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-Menu 1</a></li>
                <li><a href="#">Sous-Menu 2</a></li>
                <li><a href="#">Sous-Menu 3</a></li>
            </ul>
        </li>
	</ul>
</div>	
<div id="menu3">
    <ul>
        <li><a href="#">Lien 1</a>
            <ul>
                <li><a href="#">Sous-Menu 1</a></li>
                <li><a href="#">Sous-Menu 2</a></li>
                <li><a href="#">Sous-Menu 3</a></li>
            </ul>
        </li>
	</ul>
</div>	
</body>
</html>

et sinon, mon problème a révélé une lacune sur Firebug ; je vais tenter de la combler.

**NoSmoking** · 12/07/2014, 14h24

Envoyé par laurentSc

Pourrais-tu me le décortiquer comme tu avais fait précédemment ?

as tu pris le temps de lire les réponses faites par Muchos???

Envoyé par Muchos

Que vient faire #menu li a { display: block; background: grey; } dans le problème ?!

Envoyé par Muchos

Voilà sans doute pourquoi le background de LI n'est pas visible, puisque le lien prend l'ensemble de son parent ><

Ajouter #menu li { padding: 1ex; } devrait révéler le background bleu derrière le lien.

Signification de #menu li li a

CSS

Discussions similaires

Partager

Partager