Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Customizing Colors and Fonts Use Classes in CSS

Posted by Rogelio Ruiz Panotes
Rogelio Ruiz Panotes
Courses Plus Student 383 Points

What is a pseudo-class?

?

Harry Beckwith
Harry Beckwith
13,452 Points
Harry Beckwith
Harry Beckwith
13,452 Points

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it Style visited and unvisited links differently

You can can combine pseudo classes and CSS to make cool hover effects.

For example a lot of buttons have a hover effect such as:

.button:hover { background:blue; }

Would change the background of the button to blue, wen a users mouse hovers over the button.

1 Answer

mattlebl
mattlebl
10,849 Points
mattlebl
mattlebl
10,849 Points

A pseudo class is the string appended to a class, so that you can style the element based on if it's selected, hovered over, or (in the case of links) visited.

For example:

a {
  /* Styles for a normal link */
}

a:visited {
  /* Styles for a link that has been clicked (think the purple links in a Google search)
}

a:hover {
  /* Styles for a link that currently has a cursor hovering over it. Some websites use this to add an underline or change the colour. */
}