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.

Pseudo-classes

• Reference: 📑 Pseudo-classes – MDN
• Reference: 📑 :root – MDN
  The :root CSS pseudo-class can be useful for declaring global CSS variables – MDN.
  What are the advantages of using CSS variables/custom properties?
  Check Your Understanding

  CSS variables are useful because they improve maintainability by centralizing common values, meaning values can be changed in one convenient place.

  What does AI say about that advantages of using CSS variables?

• Open: CodePen ☼ – CSS Only Floated Labels – by Nick Salloum
  Can you find all the instances of CSS pseudo-classes being used in this CodePen example?
  Check Your Understanding

  • :root
  • :focus
  • :placeholder-shown
  • :not

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.

Pseudo-elements

• Reference: 📑 Pseudo-elements – MDN

  Most browsers will actually accept single colons versus double-colons. However, it is good practice to always use double colons :: when selecting pseudo-elements in CSS.

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