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 hovers over it with their cursor. A pseudo-element is used to style specified parts of an element, like 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's pointer hovers over the button.
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. Values can be changed in one, convenient place.
What does AI say about that advantages of using CSS variables?
- Open: CSS
Only Floated Labels - CodePen 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
A key design issue with color contrast is not accounting for the default settings of browsers, specifically for anchor tags link and visited properties. These can be adjusted with pseudo-classes.
Activity Instructions: Pseudo-classes
- Fork (copy) this CodePen ⚙️ CSS Pseudo-classes Activity to your own CodePen account.
- In your copy on CodePen, add CSS pseudo-class rule(s) for the anchor tags to be navy for both
active
links andvisited
links. - Add a CSS pseudo-class rule for the anchor tags to change to purple for the
hover
effect on links. - Add CSS pseudo-class rule to provide borders for the
div.datatable
so that the borders of thediv.col
elements do not double up. (see the example screenshot below) - Make the last row of the data table have a darker gray background color by using the
:last-child
pseudo-class. - Set up a CSS variable for the border shorthand value in the
:root
pseudo-class as1px solid #777
;Hints
:root { --bord: _____}
then use it withvar(--bord)
where needed,
for example,border-right: var(--bord);
- Consider using the 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.
Check Your Understanding - Example Solution
CodePen: ⚙️ CSS Pseudo-classes activity solution.
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
- Fork this CodePen ⚙️ CSS Pseudo Elements to your own CodePen account.
- Add a new CSS rule for the list items in the ordered list that uses a marker pseudo element.
- In this new rule, add 3 declarations to change the ordered list's appearance:
- make the list item marker a checkmark using
content
- make the marker
color
navy - make the
font-size
2rem
- make the list item marker a checkmark using
Option: Using the Emoji Picker to get a checkmark symbol
- Windows: Press
🪟+.
(Windows key + period) [ Windows Keyboard Tips and Tricks ] - MacOS:
⌘+ctrl+spacebar
Check Your Understanding - Example Solution
CodePen: ⚙️ CSS Pseudo-classes activity solution.