How to use pseudo classes in HTML /CSS.

Pseudo-classes are keywords which allow selection based on information that
lies outside of the document tree or that cannot be expressed by other
selectors or combinators.

Syntax:

selector:pseudo-class
{
property:VALUE
}

1 :active Class

Applies to any element being activated (ie. clicked)by the user.

Code:

a:active {
   color:red; }

2 :hover Class

Applies to any element being hovered by the user’s pointing device,
but not activated.
Code:

a:hover{
font-size:28px;
color:red; }

3 :visited Class

Applies to any links which has been visited by the user.

Code:

a:visited{
   color:green; }

4 :first-child Class

Represents any element that is the first child element of its parent.
Code:

ul li:first-child{
   color:red; }

5 :last-child Class

Represents any element that is the last child element of its parent..

Code:

ul li:last-child{
 color:yellow; }

6 :nth-child Class

Applies when an element is the n-th element of its parent,where n can be
an integer, a mathematical expression (eg:n+3) or the keywords odd or even.

Code:

ul li:nth-child(2) {
 color:blue; }

7 :first-of-type Class

Applies when an element is the first of the selected element type
inside its parent. This may or may not be the first-child.

Code:

ul li:first-of-type{
 color:darkgoldenrod; }

8 :last-of-type Class

Applies when an element is the last of the selected element type inside
its parent. This may or may not be the last-child.

Code:

ul li:last-of-type{
 color:orange; }

9 :focus Class

Applies to any element which has the user’s focus. This can be given by
the user’s keyborad, mouse events, or other forms of input.

Code:

input:focus {
 border:3px solid red; }

10 :checked Class

Applies to radio, checkbox, or option elements that are checked or toggled
into an “on” state.

Code:

input[type=’checkbox’]: checked {
 box-shadow:0 0 0 3px red;}

11 :enabled Class

Applies to any UI element which is in an enabled state.

Code:

input:enabled {
 border: 2px solid blue; }

12 :disabled Class

Applies to any UI element which is in a disabled state.

Code:

input:disabled {
 border: 2px solid blue; }

13 :empty Class

Applies to any element which has no children.

Code:

.empty:empty {
 border: 4px solid red; }