Pseudo-classes

All in one: every pseudo-class, side by side

What this example compares

One colon, two colons or a class: a real class vs :hover vs ::before (the three families of pseudo-class)
The four link states: :link vs :visited vs :hover vs :active, written in the right order (LoVe HAte) and the wrong one
:hover on any element: a box, a list row, a picture, a button, and the "hover to reveal" phone trap
Focus: the browser's ring vs your own ring vs outline: none, and :focus vs :focus-visible
Position: :first-child vs :last-child vs :nth-child(3) vs :only-child
nth-child formulas: odd = 2n+1, even = 2n, 3n, 3n+2, the made-up :even, and a zebra-striped table
First child or first of its type: p:first-child vs p:first-of-type
Form states: :checked vs :disabled / :enabled vs :required / :optional
Is the value right? :valid vs :invalid vs :placeholder-shown vs :invalid:not(:placeholder-shown)
Everything except: button vs button:not(.ghost), li vs li:not(:last-child)
The top element: :root vs html, and a CSS variable kept on :root
Specificity: why nav a:hover loses to #menu a, and the fix #menu a:hover
Project step 11: Asha's course page with :hover, :first-child, :active and :focus-visible

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see thirteen panels (scroll inside the result to reach them all). In panel 1 the first box is cream all the time, the second only under the mouse, and the third starts with a red NEW. Panel 2 shows six blue "Notes" links that turn orange or red only when you hover or press them, except the last one, which stays blue. In panel 3 the picture is faded and the fee is hidden until you hover. In panel 4 tab through the boxes: the second shows a thick orange ring, the third shows nothing. Panel 5 marks Course, MTH101, CSE305 and the lone Asha in yellow. Panel 6 marks 1 3 5 7 twice, 2 4 6 8 twice, then 3 6, then 2 5 8, nothing at all for li:even, and a striped table. In panel 7 only the second and third boxes have a yellow paragraph. Panel 8 shows Asha and Priya ticked and yellow, then the locked field, the usable field, the email field and the phone field picked in turn. In panel 9 the boxes are green, red, yellow, red, plain and plain with an orange bar. In panel 10 Cancel is light only in the second box, and the last box has no line under Contact. Panel 11 shows an orange box and a green one. In panel 12 only the middle menu turns orange on hover, and panel 13 is Asha's course page with a green edge on the first course. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 7, why is there no yellow at all in the first box, although its rule is p:first-child and the box holds two paragraphs?

Because the first child of that box is the <h4> heading, not a paragraph. p:first-child means "a <p> that is the first child of its parent", so here it matches nothing. p:first-of-type (the second box) counts only paragraphs, so it finds "Class at 9 am."