CSS - Selectors

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Selectors target elements so you can apply styles precisely. Start with the basics that you’ll use everywhere.

Learning Objectives

• Use element, class, ID, and universal selectors effectively.
• Prefer classes over IDs to keep specificity manageable.

Details & Examples

Basic Selectors

• Element: p { ... }
• Class: .card { ... }
• ID: #main { ... }
• Universal: * { box-sizing: border-box; }

Demo

Common Pitfalls

• Styling with IDs increases specificity; prefer classes.

Checks for Understanding

1. When would you use the universal selector *?

Exercises

1. Refactor a selector using IDs to classes to lower specificity.
2. Apply a universal box-sizing reset and verify layout stability.