Application des styles dans le HTML

bonjour,

je n'ai pas trouvé ma réponse dans le forum, j'ouvre donc une nouvelle discussion.
Si elle existe et que je ne l'ai pas trouvé je vous pris de m'excusez.

Je viens de créer un exemple basique qui n'a pas l'air de vouloir fonctionner.

Je crée un dans un fichier HTML des zones avec les balises <div>

j'essai d'application un class à une balise mais je ne comprend pas pourquoi cela ne fonctionne pas.
si je copie colle ma classe dans le header, cela fonctionne mais s'applique a tous les document, ce n'est pas ce que je recherche.

voila mon html :

Code:

1
2
3
4
5
6
7
8
9
10
<div id="baniere">baniere</div>
<div id="menu" class="toto">
	<ul>
		<li><a href="#1">Home</a></li> 
		<li><a href="#2">Portfolio</a></li> 
		<li><a href="#3">News</a></li>
		<li><a href="#4">Labs</a></li> 
		<li><a href="#5">Contact</a></li> 
	</ul>
</div>

....

et mon CSS :

Code:

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
71
72
73
74
75
76
77
78
79
.toto{
	ul{ 
		display: table;
		 width: 500px; 
		 margin: 100px auto; 
		 padding: 0;
		 background: dodgerblue;
		 background: -webkit-linear-gradient(deepskyblue, dodgerblue); 
		 background: -moz-linear-gradient(deepskyblue, dodgerblue); 
		 background: -ms-linear-gradient(deepskyblue, dodgerblue); 
		 background: -o-linear-gradient(deepskyblue, dodgerblue); 
		 border-radius: 3px; 
		 box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
	}
	ul li{ display: table-cell; 
	}
	ul li:first-child a{ border-radius: 3px 0 0 3px; } 
	ul li:last-child a{ border-radius: 0 3px 3px 0; }
	ul li a
	{ 
		display: block; 
		text-align: center; 
		color: rgba(0, 0, 0, .7); 
		text-decoration: none; 
		padding: 8px 8px 17px 8px; 
		text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
		box-shadow: 
			0 1px 0 rgba(255, 255, 255, .7) inset, 
			0 -1px 0 hsl(210, 100%, 32%) inset, 
			0 -2px 0 hsl(210, 100%, 38%) inset, 
			0 -3px 0 hsl(210, 100%, 44%) inset, 
			0 -4px 0 hsl(210, 100%, 50%) inset, 
			0 -5px 0 hsl(210, 100%, 60%) inset;
		transition: padding .3s, background .3s;
		position: relative;
	}
 
	ul li a:hover, 
	ul li a:focus{  
		display: block; 
		text-align: center; 
		color: rgba(0, 0, 0, .7); 
		text-decoration: none; 
		padding: 8px 25px 17px 25px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
		background: rgba(255,255,255,.2);
		box-shadow: 
			0 1px 0 rgba(255, 255, 255, .7) inset, 
			0 -1px 0 hsl(210, 100%, 32%) inset, 
			0 -2px 0 hsl(210, 100%, 38%) inset, 
			0 -3px 0 hsl(210, 100%, 44%) inset, 
			0 -4px 0 hsl(210, 100%, 50%) inset, 
			0 -5px 0 hsl(210, 100%, 60%) inset;
		transition: all .3s 0s;
 
	}
	ul li a:active{ 
		background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
		box-shadow: 0 0 2px rgba(0,0,0,.3) inset; 
	}
 
	ul li a::before{ 
		content: ''; 
		position: absolute; 
		left: 50%; 
		bottom: 9px; 
		margin-left: -2px; 
		width: 4px; 
		height: 4px; 
		border-radius: 50%; 
		background: rgba(0, 0, 0, .5); 
	}
 
	ul li a:hover::before, 
	ul li a:focus::before{ 
		background: white; 
		box-shadow: 0 0 2px white, 0 -1px 0 rgba(0, 0, 0, .4); 
		}
}

la question est :

savez vous pourquoi le style ne semble pas s'appliquer ?

Merci
Christophe

Sauf si vous utilisez un pré-processeur, CSS ne s'imbrique pas ainsi.

Autrement dit :
Code:

1 2 3 .foo { bar { } }
ne permet pas d'atteindre <bar class="foo">.

merci beaucoup pour la réponse.
Peut etre aurais tu un bon tuto a me conseiller ou me donner un exemple.

Merci beaucoup

en fait je ne fait pas tout a fait la même chose :
Code:

1 2 3 #foo { bar {} }
Code:

1 2 3 <div id=menu class="foo> { <bar>....</bar> }

Ça ne va toujours pas, et c'est illogique : il faudrait à la rigueur #menu ou .foo comme sélecteur.

Je vous conseille de lire le tuto Premiers pas avec CSS, et de valider votre code HTML/CSS.

si je prend le le premier CSS que tu as posté il faut faire
Code:

1 2 3 .toto ul{ }
ne pas mettre de parenthèses entre la class toto et l'UL.
l'UL dépend de toto. tu peux aussi n'écrire que .toto cela s'appliquera à tout ce que contient la classe toto

Oui mais en écrivant:
Code:

1 2 3 .toto ul { } /*ou*/ ul.toto { }
on peut affiner davantage le style lorsqu'il y a des sous menus par exemple
Code:

1 2 3 ul.toto ul { line-height:0.7em; } /*ou*/ .toto ul ul { line-height:0.7em; }
Dans ce cas, il faut coder

Code:

<ul class='toto'> ......