CSS Selectors

2. Going Further with Attribute Selectors and Pseudo-Classes

Inspect the head element for use of :first-child and last-child; :only-child and :empty.

:first-child and last-child

• Item 1 – :first-child color and background-color changed
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10 – :last-child border removed

:only-child and :empty

• Item 1
• Item 2 ✓ :only-child color and font size
• Item 3
• Item 4
• Item 5
• Item 6 ✓ :only-child color and font size
• Item 8 – Previous item targeted by :empty-child and background-color changed
• Item 9
• Item 10