Menu
I was looking here at CSS :active Selector.
The :active selector styles links to active pages
That got me thinking, what the heck is an 'active page' in HTML/CSS terminology...
At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus.
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.
<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>
<body>
<p>Click the links to see the background color become yellow:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>
The form field works for :focus. But the button or links don't work for :active.
Why is that? Is there something about 'active page' I'm not understanding that w3schools talked about.
I saw this nice tip when Googling for it, but I don't think it's related.
909
There is no concept of "active page" in CSS. In fact, the SitePoint Reference debunks this by saying:
The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
What the spec says is right: :active simply styles elements that are activated, e.g. clicked (as in the example given) or in some other way triggered such that the browser starts navigating to the link's target.
Note that it doesn't just apply to <a> elements; it may apply to any non-form-input element that's clicked. For instance, you can do this:
p:active {
color: red;
}
And any paragraph you click will flash its text red.
Note however that the exact definition and implementation is left up to the browser, but in general, you can rely on <a> elements having an activated state.
65
:active is the style given to an element (a or a button, for example) when the mouse is held down over it. You might have seen it visible on some sites when you click a styled button; when you actually click the button, it might change. This is the :active pseudo-class.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
