Non riesco a far funzionare a:active

HTML
codice:
	<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
codice:
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