Selector
In one line
A CSS selector is a pattern that matches one or more HTML elements so you can apply styles to them.
In simple words
A selector is the first part of a CSS rule — it tells the browser which elements the styles should apply to. Selectors range from simple (element type, class, ID) to complex (combinations, pseudo-classes, attribute matchers).
The most common selectors are the type selector (p matches all <p> elements), the class selector (.intro matches elements with class="intro"), and the ID selector (#header matches the element with id="header"). You can combine them: div.intro matches <div> elements that also have the class intro.
Selectors are also used in JavaScript with document.querySelector() to find elements in the DOM. Mastering selectors is essential for efficient CSS and DOM scripting.
Example
/* Type selector — all <p> elements */
p { color: gray; }
/* Class selector — elements with class="highlight" */
.highlight { background: yellow; }
/* ID selector — the element with id="header" */
#header { font-size: 24px; }
/* Descendant selector — <a> inside <nav> */
nav a { text-decoration: none; }Four selector types: by element type, by class, by ID, and by descendant relationship.
Related terms
Related Resources
Related Lessons
- CSS
Selectors are the foundation of CSS
Related Tools
- Regex Tester
Test patterns — similar concept to CSS selectors
Learn the fundamentals
Deepen your understanding with structured lessons on this topic.
Decode error messages
Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.