Basic Selectors
Learn the four foundational CSS selectors — universal, type, class, and ID — and understand when to reach for each one.
Selectors are how CSS finds the HTML elements you want to style. Before combinators, pseudo-classes, or attribute matching, every developer needs to master the four basic selector types: the universal selector, the type (element) selector, the class selector, and the ID selector. These four alone can style an entire website.
The universal selector (*)
The universal selector, written as an asterisk *, matches every single element on the page. It's most commonly used for global resets — for example, zeroing out default margin and padding browsers apply inconsistently, or setting box-sizing: border-box across the board. Because it applies so broadly, use it deliberately and sparingly; overusing it can make styles hard to predict and can have a (usually minor) performance cost on very large pages.
Type (element) selectors
A type selector targets all elements of a given HTML tag name — p, h1, ul, button, and so on. It's the most direct selector: write the tag name with no punctuation prefix. Type selectors are great for setting baseline styles that should apply to every instance of a tag, like default paragraph line-height or default link color.
Class selectors (.name)
A class selector targets any element carrying a matching class attribute, and is written with a leading period: .card targets <div class="card">. Classes are the workhorse selector of everyday CSS — they're reusable across any number of elements, and one element can carry multiple classes at once (class="card featured"), letting you compose styles.
Classes are the recommended default for styling in most situations because they're reusable, don't force a one-to-one relationship with markup, and keep specificity low and predictable.
ID selectors (#name)
An ID selector targets the single element carrying a matching id attribute, written with a leading hash: #main-header targets <header id="main-header">. IDs must be unique per page in valid HTML (only one element should have a given id value), which makes ID selectors inherently non-reusable for styling.
ID selectors also carry much higher specificity than class selectors, which makes them harder to override later. For this reason, modern CSS practice favors using IDs mainly for JavaScript hooks, fragment links (#section-two), and accessibility (aria-labelledby), and prefers classes for styling.
The four basic selectors
* {
box-sizing: border-box;
}
p {
line-height: 1.5;
}
.card {
border: 1px solid #ddd;
}
#main-header {
background-color: #333;
}Code Examples
A common 'CSS reset' opener — removes the browser's inconsistent default spacing from every element so you start from a clean, predictable baseline.
Two <p> elements — a type selector p would style both, while a class selector .lead would style only the second one. CSS: p { color: #333; } .lead { font-size: 20px; font-weight: 500; }
Notice class="card" could be reused on many product cards, but id="cart-summary" should exist only once on the page — the classic reusable-vs-unique distinction. CSS: .card { border: 1px solid #ccc; padding: 16px; } #cart-summary { position: fixed; top: 0; right: 0; }
* {
margin: 0;
padding: 0;
}<p>Regular text.</p>
<p class="lead">Introductory text.</p><div class="card">
<h2 class="card-title">Product Name</h2>
<p class="card-price">$29.99</p>
</div>
<div id="cart-summary">
<p>3 items</p>
</div>Selector reach
As you move down the list, the selector gets more specific and typically applies to fewer elements.
* -> every element on the page
p -> every <p> element
.card -> every element with class="card" (any tag, reusable)
#header -> the ONE element with id="header" (unique)Important Rules
• selects everything; use it mainly for resets.
A type selector uses the bare tag name (p, div, h1).
A class selector starts with a period and can be reused on many elements.
An ID selector starts with # and should match only one element per page.
Prefer classes for styling; reserve IDs for JS hooks, anchors, and accessibility attributes.
How real projects lean on classes
Most professional CSS methodologies (like BEM) are built almost entirely around class selectors — you'll rarely see ID selectors used for styling in a modern, well-maintained codebase, precisely because of the specificity and reusability issues covered above..button { background: teal; }
IDs are meant to be unique per page. Reusing the same id on multiple elements is invalid HTML and will cause unpredictable behavior with JavaScript and accessibility tools; a class is the correct tool for a reusable style.
[Multiple Choice] You need to style a 'tag' badge that will appear multiple times on a page (e.g. on every blog post preview). Which selector type is the most appropriate choice? A. The universal selector (*) B. An ID selector (#tag) C. A class selector (.tag) D. A type selector on <span>, since all badges happen to be spans
C. A class selector (.tag) — Class selectors are designed to be reused across many elements, which fits a badge appearing repeatedly. An ID must be unique per page, and styling by tag name (span) would risk affecting unrelated spans elsewhere on the page.
Given <button class="btn btn-primary" id="submit-btn">Submit</button>, write a class selector rule that makes all.btn-primary elements have a blue background and white text..btn-primary { background-color: blue; color: white; } Target.btn-primary, not #submit-btn.