Pseudo-class Selector

CSS pseudo-class are used to applies special effects to some selectors. Pseudo-class selectors are indicated by the colon (:).

The simple syntax of pseudo-class is:
 selector:pseudo-class { property: value;}

CSS classes can also be used with pseudo-class
selector.class:pseudo-class { property: value;}

Link pseudo-classes

 Basic pseudo-class selectors target links (a elements) based on whether they have been clicked :link and :visited. Link pseudo-class are a type of dynamic pseudo-class.

:link
Used :link to applies a style to unclicked links.

Example
a:link { color: grenn;}

:visited
Used :visited to applies a style to links that have already been clicked.

Example
a:visited { color: gray;}

User Action pseudo-classes

Another type of dynamic pseudo-class targets states that result from direct user actions.

:focus
Used :focus to applies style to an element when the element is selected and ready for input

Example
input:focus {backgroun-color: red;}

:hover
Used :hover to applies style to an element when the mouse pointer is over the elements.

Example
a:hover {color: red; background-color: green;}

:active
Used :active to applies style to an active element.

Example
a:active {
color: red;
background-color: green;
}

Structural pseudo-classes

 Used for an elements is in the structure of the document. Such as :root, :empty, :first-child, :last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, etc.

Input pseudo-class
The input selectors are: :enabled, :disabled, and :checked.

The linguistic pseudo-class is: :lang()

The logical pseudo-class is: :not()

The location pseudo-class (use in addition to :link and :visited) is: :target.

Leave a Reply