# 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`).