Pseudo-Classes & Pseudo-Elements (Student Starter)

1. Link States

2. Structural Pseudo-Classes

:first-child, :last-child, :first-of-type, :last-of-type

We will style the first/last rows and first/last cells in this table.

Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2	Row 2, Col 3
Row 3, Col 1	Row 3, Col 2	Row 3, Col 3

:only-child

Table A has 1 row (should match). Table B has 2 rows (should not match).

Table A – only row (only-child)

Table B – row 1 (not only-child)

Table B – row 2 (not only-child)

:only-of-type

First table: td is the only td (should match). Second table: two tds (should not match).

Only td of this type	Different type (th)

td 1 (not only-of-type)	td 2 (same type)	header (different type)	td 3 (same type)

:empty

Left cell is completely empty. Right cell has text.

Not empty

3. NTH Selectors

:nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type

We will target specific rows and columns using nth selectors.

Row 1, Col 1	Row 1, Col 2
Row 2, Col 1	Row 2, Col 2
Row 3, Col 1	Row 3, Col 2
Row 4, Col 1	Row 4, Col 2
Row 5, Col 1	Row 5, Col 2
Row 6, Col 1	Row 6, Col 2

nth expressions: odd, even, 3n

We will style odd, even, and every 3rd row.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

4. Pseudo-Elements

This paragraph will be used to test ::first-letter, ::first-line, and ::selection.
Try styling these pseudo-elements in the CSS and then highlight this text in the browser.

This line will show ::before and ::after once you add them in the CSS.