WDD 131: Dynamic Web Fundamentals

W03 Learning Activity: CSS Pseudo Selection

Overview

Pseudo-classes and pseudo-elements enhance the abilities and/or content of specific selectors. A pseudo-class is used to define a special state of an element. For example, it can change the color of a button when the user hovers over it with their cursor. A pseudo-element styles specific parts of an element, such as the first letter or the first line of a paragraph.

You have been using a pseudo-class named :hover which can be used to select a button when a user hovers over the button.

Pseudo-classes

A common design issue with color contrast is not accounting for a browser's default settings, specifically for the link and visited properties of anchor tags. These can be adjusted using pseudo-classes.

Activity Instructions: Pseudo-classes

  1. Fork (copy) this CodePen ☼ CSS Pseudo-classes Activity to your own CodePen account.
  2. In your copy on CodePen, add CSS pseudo-class rule(s) for the anchor tags to be navy for both active links and visited links.
  3. Add a CSS pseudo-class rule for the anchor tags to change to purple for the hover effect on links.
  4. Add CSS pseudo-class rule to provide borders for the div.datatable so that the borders of the div.col elements do not double up. (see the example screenshot below)
  5. Make the last row of the data table have a darker gray background color by using the :last-child pseudo-class.
  6. Set up a CSS variable for the border shorthand value in the :root pseudo-class as 1px solid #777;
    Hints
    • :root { --bord: _____} then use it with var(--bord) where needed,
      for example, border-right: var(--bord);
    • Consider using the border-top versus using the CSS border property shortcut to isolate your bordering needs.
    • Use the :nth-child() and the :last-child pseudo-classes.
Screenshot of pseudo-class CodePen example
Check Your Understanding – Example Solution

CodePen ☼ CSS Pseudo-classes activity solution.

Pseudo-elements

Activity Instructions

  1. Fork this CodePen ☼ CSS Pseudo Elements to your own CodePen account.
  2. Add a new CSS rule for the list items in the ordered list that uses a marker pseudo element.
  3. In this new rule, add 3 declarations to change the ordered list's appearance:
    1. make the list item marker a checkmark using content
    2. make the marker color navy
    3. make the font-size 2rem
Option: Using the Emoji Picker to get a checkmark symbol
Check Your Understanding – Example Solution

CodePen ☼ CSS Pseudo-classes activity solution.