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:
- What is the difference between the "first active" and the "second active"?
- When are called the "first active" and the "second active"?
6 Answers
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".
: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.
The first :active (the colon matters) refers to the active pseudo css class which is automatically set by the browser. The second .active refers to a simple css class that you (or your program) need to apply to the element.
So to answer your second question, the first one is applied automatically by the browser as soon as a user has clicked (activated) a link on your webpage, whereas the second one is never applied automatically.
These are :pseudo states:
#toolbar a.opener:hover,
#toolbar a.opener:active,
#toolbar a.opener:focus {
something1;
}
This .active is a class that's been added to a parent of a.opener:
#toolbar .active a.opener {
something2;
}
#toolbar a.opener:hover,
#toolbar a.opener:active,
#toolbar a.opener:focus {
something1;
}
applies in the
<div id="toolbar">
<a class="opener"></a>
</div>
when in hover, active or focus state. While
#toolbar .active a.opener {
something2;
}
applies in
<div id="toolbar">
<div class="active">
<a class="opener"></a>
</div>
</div>
active is a state bw press and release of mouse button.
read ,
