Lesson 3: Pseudo-class Selectors in CSS

Overview

CSS pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active", like this:

  a:hover {
    /* your style here */
  }

The idea with pseudo-classes is that you can stylize elements differently when users are hovering over them (:hover) or tabbing to them with the keyboard (:focus) or at that exact moment when users are selecting a link (:active). You can also stylize links differently after users have visited them (:visited). There are many other pseudo-classes available. See the W3Schools CSS Pseudo-classes page for more information.

Learner Outcomes

At the completion of this exercise:

Use CSS Pseudo-classes to Highlight User's Position

When a user points to an object on a web page with a mouse, it's helpful if that object responds in some way. For example, when a user hovers over a link, the color and background-color of that link could be reversed. In the following example CSS, all links on a page are stylized as black on a white background, but when a user hovers over the colors are reversed.

  a {
    color: black;
    background-color: white;
  }
  a:hover {
    color: white;
    background-color: black;
  }

This functionality makes pages come to life, responding as the user moves their mouse around the page. For people who are navigating by keyboard (for example, by pressing tab to move through links on the page), this functionality is even more critical, because it's often very difficult for keyboard users to keep track of their location on the page. Most web browsers provide some visual indication of which element currently has focus, but in some of the leading browsers this is simply a thin dotted line that is very difficult, if not impossible, to see, especially against certain backgrounds. To add the same functionality for both keyboard and mouse users, we simply add the :focus pseudo-class to our earlier definition, like this:

  a {
    color: black;
    background-color: white;
  }
  a:hover, a:focus {
    color: white;
    background-color: black;
  }

Now, every time a user navigates to a link on the gather, whether they do so by pointing with a mouse or by tabbing with the keyboard, that link will reverse colors.

Activities

  1. Open your portfolio's external style sheet in a text editor, and your portfolio home page in a browser.
  2. Refer to the CSS code in the above example and add a style definition to your own style sheet that will reverse the color and background-color of link text on your page.
  3. When finished, save the file and refresh your home page in the browser, then test it. Test it by pointing to links with the mouse, and by navigating through the links on the page using the tab key.
  4. CSS pseudo-classes can produce interesting typographic effects too. Use the :first-letter pseudo-class to stylize the first letter of p#overview so that it appears larger, and using a fancier font. For help selecting a font refer to the font references in the Resources section below.

Handouts/Online Documents

All done?

Show your instructor your results before continuing on to Module 6.