| Interactive Media Design

CSS Pseudo Classes

This YouTube video was created by Steve Griffith.

CSS Pseudo-classesopen in new window help bring the feeling of interaction to our buttons and links as well as more specific sets of styles for targeting other groups of elements. As we explore advanced selectors, we will use some of these pseudo-classes to help remove unwanted spacing, add some emphasis to the first of something, or style every second or third element.

We can give our elements unique styles when the mouse is hovering over the element, and another set of styles when the mouse/touch is pressed down, or when a link has already been visited.

  1. :link - Default Link Unvisited
  2. :visited - Default Link Visited
  3. :hover - On Mouse Over
  4. :active - On press
  5. :focus - On Tab/Active

The default styling on the anchor and button element are quite a bit different but let's take a look at how each of these element's represent their pseudo states

Or fancy fill in buttons.