Geek Answers Handbook

Confuses CSS: active pseudo-class

I looked here in CSS: active selector.

Active selector styles link to active pages

It made me wonder what the "active page" is in HTML / CSS terminology ...

At this point, I went to w3docs Section: 5.11.3 Dynamic pseudo-classes :: hover ,: active and: focus.

An active pseudo-class is applied while an element is activated by the user. For example, between times, the user presses the mouse button and releases it.

So I used one of w3shools, tried its pages and hacked the example, replacing the following code, which you can just cut and 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 do not work for: active.

Why? There is something in the "active page". I do not understand what w3schools was talking about.

I saw this good tip when googling for it, but I don’t think it is related.

+8
css css-selectors pseudo-class
source share
3 answers

There is no concept of an "active page" in CSS. In fact, the SitePoint Reference pranks this by saying:

The pseudo-class does not mean a link to the active or current page - it is a common misconception among CSS beginners.

What the specification says :active just styles that are activated, for example. a click (as in the above example) or in some other way is initiated so that the browser starts navigation to the target of the link.

Note that this applies not only to <a> elements; it can be applied to any input element without a form that has been pressed. For example, you can do this:

 p:active { color: red; }

And any paragraph that you click will flash, its text will be red.

Please 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.

+25
source share

:active is the style given to an element ( a or button, for example) when the mouse is held over it. You may have seen it on some sites when you press a stylized button; when you actually click a button, this may change. This is a pseudo-class :active .

+1
source share

I have always used :active for links. A second before the browser takes you to the page that you just clicked on, the text will change to the color you called in a:active{ ... }

Example:

 a:active { color:pink; font-weight:bold; }

Most browsers support it, but you should not really waste time styling it. Back on the day of 56k connection, it was nice to see visually that the user downloadable link was uploaded.

0
source share

More articles:


All Articles