WIll CSS active work on a non-link element - css

Question

I want a items that have the tag class to be grayed (with a rounded border) when the mouse moves over and when the item(s) are clicked.
A sample item might look like this <span class="tag">Some value</span>
I was hoping this would give the desired result, (tag:hover works as hoped, but tag:active doesn't):
.tag{
}
.tag:hover{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tag:active{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Answer 1

You can use jQuery to permanently add a class to your span. You could do it like this:
.tag:hover, .tag.everclicked{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
And in jQuery:
$(document).ready(function()
{
$('.tag').click(function()
{
$(this).addClass('everclicked');
});
});
http://jsfiddle.net/r4gQQ/2/

Answer 2

You have the same CSS styles defined for both pseudo-classes. An :active element will usually have :hover too (depending on the browser), as it is applied whilst the mouse button is down on the element.
If you want the styles to stay applied when you've clicked and moved away from the element, you'll need to use JavaScript or, alternatively, give the element a tabindex attribute and use the :focus pseudo-class. Using #Marnix's test case, for example, http://jsfiddle.net/r4gQQ/1/.

Answer 3

First things first, the CSS for your :hover and :active states is identical, so you'll not see any change!
According to the specs for CSS on w3.org, :active used to only apply to hyperlinks in CSS1, but that's no longer the case. I couldn't find any explicit statement regarding what elements it works for now, so I'm just going to assume it works everywhere unless someone else knows better. It could be that it still only applies to elements the user is meant to "activate" by clicking, such as links and form buttons.
If :active does indeed apply to any kind of element now, then the above CSS should work as you want, provided you change the :active style to be different from the :hover style of course!
If it doesn't, then either there are still restrictions in CSS as to where you can use hover, or there's a bug in the CSS engine of your browser that restricts where you can apply the :active style in a way that goes against the current CSS specs. If the latter is the case, then you could use javascript to add a class on mousedown to the clicked element and remove it again on mouseup or mouseout. You can then style the active class in CSS as normal.