WDD 131: Dynamic Web Fundamentals

CSS Concepts: Pseudo Selection

Overview

Pseudo-classes and pseudo-elements are used to abilities and/or content to some selectors. A pseudo-class is used to define a special state of an element. For example, it can be used to change the color of a button when the user mouses over it. A pseudo-element is used to style specified parts of an element, like the first letter, or the first line of a paragraph.

Prepare - Pseudo-classes

• Reference: CSS Pseudo-classes - w3schools.com - use the Try It editor to work with the concept.
• Reference: CSS :root - MDN - can be useful for declaring global CSS variables. Why are CSS variables desirable?
• Ponder: CSS Only Floated Labels - CodePen by Nick Salloum
  Can you find all the instances of CSS pseudo-classes being used in this CodePen example?

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

Often, a key design issue with color contrast is not accounting for the default settings of browsers, specifically an anchor tags link and visited properties. These can be adjusted with pseudo-classes.

Activity Instructions: Pseudo-classes

1. Fork the CodePen to your own CodePen account.
2. 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 when the user hovers over any links.
4. Add CSS pseudo-class rule to provide borders for the 'table' (div.datatable) so that the borders of the 'cells' (div.col elements) do not double up. (see example screenshot below)
5. Make the last row of the 'table' have a darker gray background color by using the :last-child pseudo-class.
6. Set up a CSS variable for the border value in the :root pseudo-class for the document of 1px solid #777;
   Hints

   • :root { --bord: _____} then use it with var(--bord) where needed,
     for example, border-right: var(--bord);
   • Consider the use of border-top, etc. versus using the CSS border property shortcut to isolate your bordering needs.
   • Use the :nth-child() and the :last-child pseudo-classes.

Prepare: Pseudo-elements

• Reference: CSS Pseudo-elements - w3schools.com - Use the Try It feature to experiment
  Most browsers will actually accept single colons versus double-colons. However, it is good practice to always use double colons :: when selecting pseudo-elements.

Activity Instructions

1. Fork the CodePen to your own CodePen account.
2. Add a marker pseudo-element to the CSS.
3. In the marker rule, add declarations to change the ordered list's numbers
   1. color (navy),
   2. font-size (2rem), and
   3. font-variant (small-caps).
4. Add a before pseudo-element to add a dark checkbox emoji ☑️ to the front of the ordered list items.
   Emoji Picker: MS Windows • MAC ⌘-ctrl-spacebar

---