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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : 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
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