Difference between "a:active" and ".active a.class"

Question

I have in a css file this:

#toolbar a.opener:hover,
#toolbar a.opener:active,
#toolbar a.opener:focus {
    something1;
}
#toolbar .active a.opener {
    something2;
}

Questions:

1. What is the difference between the "first active" and the "second active"?
2. When are called the "first active" and the "second active"?

Answer 1

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

Answer 2

:active specifies the state in which an element is in. An element is :active when it is clicked on or gains focus through other means.

.active refers to a class name. In this case, the CSS rule applies to an element that has the active class within the #toolbar parent element.