Difference Between :Focus and :Active

What is the difference between :focus and :active?

:focus and :active are two different states.

:focus represents the state when the element is currently selected to receive input and
:active represents the state when the element is currently being activated by the user.

For example let's say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give "focus" to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.

On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.

An example:

<style type="text/css">  button { font-weight: normal; color: black; }  button:focus { color: red; }  button:active { font-weight: bold; }</style>  <button>  When clicked, my text turns red AND bold!<br />  But not when focused only,<br /> where my text just turns red</button>

Relationship between active and focused states

Simply saying, when you click on the link, both active and focus states are triggered. For that reason, if you want to see both active and focus states, active must be located below focus:

<a href="#">
    You will see both active and focus states
</a>

<style>
    a:focus   {
                color: green;
                margin-left: 20px;
    }

    a:active  {
                color: yellow;
                background-color: black;
    }

    /*
    Click on the link, but don't release mouse button.
    You will see, that the link have:
    - yellow text on black background
    - indent

    Then, release mouse button.
    You will see, that the link have:
    - green text
    - indent

    That's fine!
    */
</style>

Note, that active must be located below focus, as I already said. If you try to change the order, you will not see yellow text - it will be always green, because of overwriting focus over active. Let's show an example:

<style>
    /* Incorrect: */

    a:active  {
                color: yellow;
                background-color: black;
    }

    a:focus   {
                color: green;
                margin-left: 20px;
    }
</style>

Related question/answer: What is the difference between :focus and :active? (However, from my point of view, my answer is easier to understand).

Edit:

And so, returning to my original example, it was necessary just change the order of active and focus lines:

<a href="#">Test me</a>

<style>
    a:link    { color: rgb(0, 138, 206);  } /* Blue */
    a:visited { color: rgb(180, 14, 180); } /* Violet */
    a:focus   { color: green;  }
    a:active  { color: yellow; }
</style>

Does :active and :focus gets applied on mouse click? -CSS

Yes, that's expected. :active applies while the link is being clicked, i.e. while the mouse button is pressed on it. :focus applies as long as the element is in focus, which generally lasts from the moment it's first active until you move focus somewhere else on the page with another click elsewhere, a TAB key press, etc.

For your example, it sounds like you don't want to put text-decoration and box-shadow on the :focus pseudo-element at all; if you do, as you've noticed, those styles will stay after you release the mouse button, because the link is still in focus, though it's no longer active. So what I think you want is simply to use the :active pseudo-element like this:

button {
    color: black;
}
button:focus {
    outline: 0;
}
button:active {
    text-decoration: underline;
    box-shadow: 0 2px 4px 0 rgba(33, 43, 49, 0.5);
    background-color: #000;
    border-color: #fff;
    color: #fff;
}

In Gtk2, what's the difference between active and focus ?

"Active" is a state (see the GtkStateType enumeration). A widget is always in exactly one state.

Having the focus means that the widget receives keyboard input, if any. Only one widget per top-level window can have the focus. Only widgets that actually can receive keyboard input are focusable, see the text for the gtk_widget_grab_focus(). I don't think that the actual window can have the focus.

Difference between a:active and .active a.class

The first rule incorporates "pseudo" classes, which target the element when it's in a certain state. The :active pseudo-selector applies to the element when the user is clicking on it.

The latter rule is simply a class selector, which applies to an anchor element which has the class "opener" and is a descendand of an element which has the class "active".

Difference between :visited and :active selectors

:active is for when the user has clicked the element.

:visited is for when the user has visited the link before.

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Difference between windowActivated and windowFocusGained

From How to Write Window Listeners which reflects the quote in your question aswell:

windowActivated(WindowEvent) and windowDeactivated(WindowEvent):

Called just after the listened-to window is activated or deactivated,
respectively. These methods are not sent to windows that are not
frames or dialogs. For this reason, the windowGainedFocus and
windowLostFocus methods to determine when a window gains or loses the
focus are preferred.

So windowActivated is only executed when the window is a frame or dialog, while the windowGainedFocus is for all types.

How make :focus, :active be the same as :hover

There is currently no better way to do so in CSS2/3.

However, you might want to use cssnext to use the @custom-selectors and :matches() syntax today.

With @custom-selectors:

@custom-selector: --enter :hover, :focus, :active;

a:--enter { ... }

With :matches():

a:matches(:hover, :focus, :active) { ... }