Selectors & Properties
A CSS rule has two parts: a selector (what to target) and declarations (what to change). You can select by tag name (h1), class (.my-class), or ID (#my-id). Classes are the most common — add a class in HTML and style it in CSS. Properties like color, font-size, and background control appearance.
Appy Says…
If CSS is a paintbrush, selectors are how you aim it. Target every paragraph? Every button inside a card? Only the first list item? Selectors give you surgical precision over which elements get styled.
What are CSS Selectors?
A selector specifies which HTML elements a CSS rule applies to. Selectors range from simple (target all paragraphs) to complex (target the third child of a specific class).
- •
p— all paragraph elements - •
.card— all elements with class 'card' - •
#logo— the element with id 'logo' - •
h1, h2— multiple selectors (comma = OR) - •
.card h2—<h2>inside.card(descendant) - •
.card > h2— direct child only - •
a:hover— pseudo-class: style on hover - •
p::first-line— pseudo-element: style part of an element - •
[type="email"]— attribute selector
Think of it like Minecraft target selectors
Minecraft commands use @a for all players, @p for nearest player, or custom selectors for specific criteria. CSS selectors work the same: broad (p) or specific (.nav > li:first-child).
How It Works
- •1. Element selector:
button { ... }— styles ALL buttons - •2. Class:
.btn-primary { ... }— styles elements with that class - •3. Combinator:
.nav a— any<a>inside.nav - •4. Pseudo-class:
button:hover { background: blue; } - •5.
:nth-child(odd),:first-child,:last-child— powerful position-based selectors - •6. Specificity score: inline > #id > .class > element
Real-World Examples
- •Style all links in a nav:
.nav a { color: white; } - •Zebra striping:
tr:nth-child(even) { background: #f5f5f5; } - •Style focused inputs:
input:focus { border-color: blue; outline: none; } - •Style first paragraph differently:
p:first-child { font-size: 1.2rem; font-weight: bold; }
Key Facts
- •Specificity: IDs (100 points) > classes/pseudo-classes (10 points) > elements (1 point)
- •The universal selector
*matches everything —* { box-sizing: border-box } - •CSS has 50+ pseudo-classes and 15+ pseudo-elements
- •Complex selectors can hurt performance on huge pages — keep them reasonably simple
Watch Out!
Using too many IDs in CSS creates specificity wars — you need !important to override them. Prefer classes for styling. IDs should be used sparingly (once per page) mainly for JavaScript hooks or anchor links.
Remember
Classes for styling (reusable), IDs for JavaScript/anchors (unique). Use descendant selectors to scope styles, pseudo-classes for interactive states.
What You Learned
- •Selectors target elements by type, class, ID, attribute, or position
- •Specificity determines which rule wins: #id > .class > element
- •Unlocks: precise styling, interactive hover/focus states, pattern-based rules
Key Facts
- →Specificity: IDs (100 points) > classes/pseudo-classes (10 points) > elements (1 point)
- →The universal selector
*matches everything —* { box-sizing: border-box } - →CSS has 50+ pseudo-classes and 15+ pseudo-elements
- →Complex selectors can hurt performance on huge pages — keep them reasonably simple
Real-World Examples
Remember
Classes for styling (reusable), IDs for JavaScript/anchors (unique). Use descendant selectors to scope styles, pseudo-classes for interactive states.
Quick Quiz
How do you select by class in CSS?