Selectors
Selectors tell the browser which HTML elements to style. Here are the most common ones:
Demo: Basic Selectors
HTML
<h1>Element Selector</h1>
<p class="highlight">Class Selector</p>
<p id="special">ID Selector</p>
<div>
<p>Descendant selector</p>
</div> CSS
h1 { color: #6366f1; }
.highlight { background: #fef9c3; padding: 4px 8px; }
#special { color: #059669; font-weight: bold; }
div p { font-style: italic; }Live Output Window
Selector Types
| Selector | Syntax | Targets |
|---|---|---|
| Universal | * | Everything |
| Type | h1 | All <h1> elements |
| Class | .classname | Elements with that class |
| ID | #idname | The element with that ID |
| Descendant | div p | <p> inside <div> |
| Child | div > p | Direct child <p> |
| Adjacent | h1 + p | <p> immediately after <h1> |
| Attribute | [type] | Elements with that attribute |
Demo: Combinators
HTML
<div class="card">
<p>Child (via descendant)</p>
<div>
<p>Nested descendant</p>
</div>
</div>
<p>Adjacent sibling</p>
<p>General sibling</p> CSS
.card { border: 1px solid #cbd5e1; padding: 12px; border-radius: 6px; }
.card > p { color: #dc2626; font-weight: bold; }
.card p { border-left: 3px solid #6366f1; padding-left: 8px; }
.card + p { color: #059669; }
.card ~ p { font-style: italic; }Live Output Window