a:active css3 non funziona

[pattaya]

Non riesco a far funzionare a:active

HTML

	<div class="main-width">
		<nav>
			<ul>
				[*]<span>Home</span>
				[*]<span>Categories</span>
				[*]<span>About</span>				
				[*]<span>Portfolio</span>
				[*]<span>Contact</span>

			[/list]
		</nav>
	</div>

CSS

nav
{
	float: right;
}

nav ul
{
	padding: 0;
	margin: 0;
	list-style: none;  	
}

nav li
{
	float: left;
}

nav a
{
	float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
	border: 1px solid #830883;
	font: bold 16px Arial, Helvetica; 	
    background-color: #830883;
    background-image: -moz-linear-gradient(#ba3cba, #830883);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ba3cba), to(#830883));    
    background-image: -webkit-linear-gradient(#ba3cba, #830883);
    background-image: -o-linear-gradient(#ba3cba, #830883);
    background-image: -ms-linear-gradient(#ba3cba, #830883);
    background-image: linear-gradient(#ba3cba, #830883);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);    
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;	
}

nav a:hover
{
    background-color: #ba3cba;
    background-image: -moz-linear-gradient(#830883, #ba3cba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#830883), to(#ba3cba));      
    background-image: -webkit-linear-gradient(#830883, #ba3cba);
    background-image: -o-linear-gradient(#830883, #ba3cba);
    background-image: -ms-linear-gradient(#830883, #ba3cba);
    background-image: linear-gradient(#830883, #ba3cba);
}

nav a:active span
{
    background: #00F;
    position: relative;
    top: 2px;    
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; 
}

nav span
{
	border: 1px dashed #eba2eb;
    display: inline-block;
    padding: 4px 15px;
	cursor: pointer;	
    background-color: #ba3cba;
    background-image: -moz-linear-gradient(#d43bd4, #ab18ab);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d43bd4), to(#ab18ab));      
    background-image: -webkit-linear-gradient(#d43bd4, #ab18ab);
    background-image: -o-linear-gradient(#d43bd4, #ab18ab);
    background-image: -ms-linear-gradient(#d43bd4, #ab18ab);
    background-image: linear-gradient(#d43bd4, #ab18ab);
}

nav a:hover span
{	
    background-color: #ba3cba;
    background-image: -moz-linear-gradient(#ab18ab, #d43bd4);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ab18ab), to(#d43bd4));      
    background-image: -webkit-linear-gradient(#ab18ab, #d43bd4);
    background-image: -o-linear-gradient(#ab18ab, #d43bd4);
    background-image: -ms-linear-gradient(#ab18ab, #d43bd4);
    background-image: linear-gradient(#ab18ab, #d43bd4);
}

Non sò dove inserire "class:a active"
Ho provato su[*] sul <a> ed anche su <span> ma non funziona.
Grazie

[codencode]

La pseudoclasse :active va associata sempre ad a.
Quale effetto vuoi ottenere?

[pattaya]

effettivamente ho il css

nav a:active

ma quando nell html inserisco la classe "active"
[*]<span>Home</span>

<li class="active" ><span>Home</span>
[*]<span class="active" >Home</span>

non funziona.
Ho provato a modificare il css in

nav a:active span
nav ul li a:active
nav ul li a:active span
ma nulla non risponde.
L'effetto dovrebbe essere di bottone attivo con colore diverso.

[ResianTaxidrive]

non devi mettere la classe active.
Nello stile ci sono i ":" proprio perchè "active" è una pseudoclasse dell'elemento <a>. Come ad esempio a:hover che funziona quando si passa col mouse sul link. Funziona automaticamente, non certo mettendoci una classe chiamata hover.

[pattaya]

Grazie mille, sono proprio un' ignorante!
l' hover funziona ma active no.!?
ho aggiunto al css " nav a:active span " ma nulla, dove sbaglio?
Logicamente eliminando la classe.
Grazie

[Prill]

Provato così?

nav {...}

nav ul {... 	}

nav li {...}
	
nav span {...}

nav a {...}

nav a:hover {...}

nav a:hover span {...}

nav a:active, nav a:focus {...}

nav a:active span, nav a:focus span {...}

assegna anche a "nav a" un display:block

[pattaya]

Ho risolto!
a:active è solo per quando tieni premuto il pulsante ed in questo caso funziona alla meraviglia.
Non riuscivo a capire perchè quello che cercavo non era questo.
Io cercavo che il bottone fosse in uno stato diverso "colore ecc.." sulla pagina dove sono.

Sono intervenuto sull' html ed ho aggiunto una classe con relativo css.
Vi posto il codice:

html

<div class="main-width">
<div id="logo"></div>
 <nav>
 <ul>
 <li id="activelink" ><span>Home</span>[*]<span>Rooms</span>[*]<span>Rates</span> [*]<span>Service</span>[*]<span>Contact</span>[*]<span>Gallery</span>[*]<span>Video</span>[/list]
 </nav>
 </div>

css relativo

.main-width li#activelink a { color: #F6C; }

Probabbilmente non è esatto ma così ho l'effetto che cercavo.
Anzi se qualcuno sà sistemarlo....grazie

[ResianTaxidrive]

è la procedura corretta