Pseudo-classes lab — Allowed

This file is the gauge for everything in pseudo-classes/. Do not use anything outside this list.

Scope: the foundational Flexbox controls demonstrated in lessons 1–5 only, plus these pseudo-classes: :hover, :focus, :active, :visited, :first-child, :nth-child(). Promotion of the Flexbox chapter does not expand this lab to its advanced properties.

HTML tags allowed

Document structure

html
head
title
body
header
main
section
article
aside
footer
link (stylesheet and Google Fonts)

Content / controls

div
span
p
h1, h2, h3, h4, h5, h6
img
figure, figcaption
input
button
ul, ol, li
nav
a

CSS properties allowed

margin
padding
font-size
font-weight
font-family
width
height
background
background-size
display
border
border-radius
color
text-align
justify-content
align-items
flex-direction
gap

Pseudo-classes allowed

:hover
:focus
:active
:visited
:first-child
:nth-child() (including odd, even, and numbers)

Allowed at-rules

@font-face with descriptors: font-family, src, font-weight, font-style

Allowed `display` values

block
inline
inline-block
none
flex

Allowed Flexbox values

Use only justify-content, align-items, flex-direction, and gap with the values demonstrated in ../flexbox/01-playground.html through 05-stack.html.

Advanced properties from lessons 6–9—flex-wrap, flex-grow, flex-shrink, flex-basis, flex, align-self, align-content, and order—are outside this lab’s scope.

Not allowed

JavaScript
Any HTML tag not listed above
Any CSS property not listed above
Other pseudo-classes not listed above
Inline style attributes

Attributes allowed (as needed)

On html: lang
On link: rel, href, crossorigin
On a: href
On elements: class, id when used for labelling or fragment links
On landmarks and sections: aria-label, aria-labelledby
On img: src, alt, width, height
On input: type, name, id, placeholder, value, min, checked, readonly
On button: type

Pages

File	Purpose
`01-basics.html`	`:hover`, `:active`, `:focus` on buttons and inputs
`02-nav.html`	Nav/chips `:hover` + link `:visited`
`03-cards.html`	Card / tile `:hover` (and nested hover)
`04-lists.html`	`:first-child` and `:nth-child` patterns

Rules to lean on

43–48 (pseudo-classes), 72–80 (semantic HTML), 2 (contrast), 7–10 / 42 (Flexbox), 32 (lang), 15–19 (alt).