Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo_class { property: value; }, simply with a colon in between the selector and the pseudo class.
Link Related CSS Pseudo-Class
Pseudo-Class :active
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements.
This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :visited, appearing in subsequent rules. In order to style links appropriately, you need to put the :active rule after all the other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
CSS
a:link { color: blue } /* unvisited links */
a:visited { color: purple } /* visited links */
a:hover { font-weight: bold } /* user hovers */
a:active { color: lime } /* active links */
Pseudo-Class :link
The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending on the expected effect.
Pseudo-Class :hover
The :hover CSS pseudo-class matches, when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.
Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.
Pseudo-Class:visited
The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active.
The post Pseudo-Class appeared first on CSS STARS.