Discussion :

[ClarusAD]

Salut,
Je souhaiterais cibler chaque niveau d'une liste.
J'y parviens de la manière ci après (voir l'image jointe), mais je souhaiterais quelque chose de... plus propre ;
genre avec des pseudo-éléments ou des pseudo-classes. Ya moyen ?
Merci.

Code :

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
<style>
	nav ul          {color:#000}
	nav ul ul       {color:#aaa}
	nav ul ul ul    {color:#ddd}
	nav ul ul ul ul {color:#eee}
</style>
<nav>
	<ul>
		<li>level_1 item_1</li>
		<li>level_1 item_2
			<ul>
				<li>level_2 item_1</li>
				<li>level_2 item_2</li>
			</ul>
		</li>
		<li>level_1 item_3</li>
			<ul>
				<li>level_2 item_1
					<ul>
						<li>level_3 item_1
							<ul>
								<li>level_4 item_1</li>
								<li>level_4 item_2</li>
							</ul>
						</li>
						<li>level_3 item_2</li>
					</ul>
				</li>
				<li>level_2 item_2</li>
			</ul>
		<li>level_1 item_4</li>
	</ul>
</nav>

[NoSmoking]

Bonjour,

mais je souhaiterais quelque chose de... plus propre

que reproches tu à ton code, il a l'avantage au moins d'être clair ?

Sauf à mettre des classes à tes différents niveaux, je ne vois pas en quoi cela serait plus propre, après tout c'est du CSS avec C pour cascade.

• Pour les Pseudo-éléments je ne vois pas l'aide qu'il pourrait t'apporter.
• Pour les Pseudo-classes là aussi c'est raté.

[JefReb]

Il y a aussi la possibilité d'utiliser les classes. Peut-être que c'est plus facile à maîtriser que les "ul ul ul ul" mais pas plus simple.

Code css :

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

1
2
3
4
nav ul          {color:#000; }
nav ul.lvl2 li 	{color:blue;}
nav ul.lvl3 li	{color:green;}
nav ul.lvl4 li	{color:red;}

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
<nav>
<ul>
	<li> 1.1</li>
	<li> 1.2
		<ul class="lvl2">
        	<li> 2.1</li>
            <li> 2.2</li>
		</ul>
	</li>
    <li 1.3>
    	<ul class="lvl2">
        	<li> 2.1
            	<ul class="lvl3">
                	<li> 3.1
                    	<ul class="lvl4">
                        <li> 4.1</li>
                        <li> 4.2</li>
                        <li> 4.3</li>
                        </ul>                   
                    </li>
                    <li> 3.2</li>               
            	</ul>
            </li>
            <li> 2.2</li>        
        </ul>
    </li> 
    <li >1.4</li> 
</ul>  	    
</nav>

ps: Attention il ne faut pas oublier le point-virgule, même si ça marche

Code css :

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

nav ul          {color:#000}

et de plus le code html est bancale, il traine un </li> qui ne devrait pas:

Code html :

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

1
2
3
4
...
<li>level_1 item_3</li>
			<ul>
				<li>level_2 item_1

...