CSS Pseudo-Classes

CSS pseudo-classes are used to define a special state of an element such as :hover, :active, :focus, :link, and :checked as well as CSS pseudo elements ::after, ::before, ::selection, etc.

Uses of CSS Pseudo-Classes

• Add special style to visited and unvisited links and easy differentiate it.
• Easily change the style of an element when you moving the mouse on an element.
• Style an element when it gets focus.

Syntax of pseudo-classes

selector :pseudo-class {
     property: value;
  }

selector.class :pseudo-class {
     property: value;
  }

CSS Pseudo Classes

• :active - The :active pseudo-class use to selects the active link
• :link - The :link pseudo-class use to selects all unvisited links
• :hover - The :hover pseudo-class use to add special style to an element when you mouse over it
• :focus - The :focus pseudo-class use to add special style to an element while the element has focus
• :checked - The :checked pseudo-class use to selects every checked elements
• :disabled - The :disabled pseudo-class use to selects every disabled elements
• :empty - The :empty pseudo-class use to selects every elements that has no children
• :first-child - The :first-child pseudo-class use to selects every elements that is the first child of its parent
• :valid - The :valid pseudo-class use to selects all elements with a valid value
• :visited - The :visited pseudo-class use to selects all visited links

Important Rules of Pseudo-Classes

• 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 can be combined with CSS classes.

The :active Pseudo Class

The actice pseudo-class is used to change the color of active links:

:active Pseudo Class Example

a :active {
     color: blue;
  }

Output

The :link Pseudo Class

The link pseudo-class is used to set the link color:

:link Pseudo Class Example

a :link {
     color: pink;
  }

Output

The :hover Pseudo Class

The hover pseudo-class is used to change the color of links when bring a mouse pointer over the link:

:hover Pseudo Class Example

a :hover {
     color: red;
  }

Output

Tooltip :hover

Tooltip hover is used to display the element when the mouse pointer over the link, paragraph OR element. Suppose that, you have a <div> element to show a <p> element:

Tooltip hover Example

p {
     color: #fff;
     background-color: green;
     padding: 10px;
     border: 1px dotted red;
  }
div :hover p {
     display: block;
  }