CSS Selectors
CSS selectors tell the browser which HTML elements to style. Learn element, class, and ID selectors. This is a foundational concept in styling and visual design that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world CSS experience. Take your time with each section and practice the examples
20 min•By Priygop Team•Last updated: Feb 2026
CSS Selectors
A CSS selector targets the HTML element(s) you want to style. The element selector targets all elements of that type. The class selector (.) targets elements with a specific class. The ID selector (#) targets one unique element. You can combine selectors for more specific targeting.
Types of Selectors
- p { } — Element selector: styles all <p> tags
- .myClass { } — Class selector: styles elements with class='myClass'
- #myId { } — ID selector: styles the element with id='myId'
- * { } — Universal selector: styles everything
- h1, h2, p { } — Group selector: styles multiple elements
- div p { } — Descendant selector: <p> inside <div>
Selectors Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Element selector */
p { color: gray; }
/* Class selector */
.highlight { background-color: yellow; font-weight: bold; }
/* ID selector */
#main-title { color: #04AA6D; font-size: 32px; }
/* Group selector */
h2, h3 { color: navy; }
</style>
</head>
<body>
<h1 id="main-title">Welcome</h1>
<h2>Section One</h2>
<p>Normal paragraph text.</p>
<p class="highlight">This paragraph is highlighted!</p>
<h3>Sub-section</h3>
<p>Another paragraph.</p>
</body>
</html>Try It Yourself: Selectors
Try It Yourself: SelectorsCSS
CSS Editor
✓ ValidTab = 2 spaces
CSS|22 lines|560 chars|✓ Valid syntax
UTF-8