CSS Pseudo class – Tutorials Art

A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer. They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code.

CSS Pseudo class-Anchor

The following example demonstrates how to use the :link class to set the link color. Possible values could be any color name in any valid format.

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

CSS Pseudo class-Hover

The following example demonstrates how to use the :hover class to change the color of links when we bring a mouse pointer over that link. Possible values could be any color name in any valid format.

       <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>

CSS Pseudo class-First child

The :first-child pseudo-class matches a specified element that is the first child of another element and adds special style to that element that is the first child of some other element.

p:first-child {
  color: red;
}

CSS Pseudo class- Values

While defining pseudo-classes in a <style>…</style> block, following points should be noted −

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
a:active MUST come after a:hover in the CSS definition in order to be effective.
Pseudo-class names are not case-sensitive.
Pseudo-class are different from CSS classes but they can be combined.

Sr.No.	Value & Description
1	:link Use this class to add special style to an unvisited link.
2	:visited Use this class to add special style to a visited link.
3	:hover Use this class to add special style to an element when you mouse over it.
4	:active Use this class to add special style to an active element.
5	:focus Use this class to add special style to an element while the element has focus.
6	:first-child Use this class to add special style to an element that is the first child of some other element.
7	:lang Use this class to specify a language to use in a specified element.