A complete guide to CSS selectors with examples — from basics to advanced pseudo-classes and pseudo-elements.
CSS selectors are the building blocks of styling. They let you target specific elements on your page and apply styles in powerful ways.
In this article, we’ll go through every CSS selector with examples — from the basics you already know to the advanced ones that will make your CSS sharper and cleaner.
🔹 1. Basic Selectors
These are the most common selectors you'll use every day.
| Selector | Description | Example |
|---|---|---|
* |
Universal selector – selects all elements | * { margin: 0; } |
element |
Type selector – selects all <p> elements |
p { color: blue; } |
.class |
Class selector | .btn { background: green; } |
#id |
ID selector | #header { height: 80px; } |
🔹 2. Grouping & Combinators
Selectors can be combined to target elements more precisely.
| Selector | Description | Example |
|---|---|---|
A, B |
Groups multiple selectors | h1, h2 { font-weight: bold; } |
A B |
Descendant – selects B inside A
|
div p { color: red; } |
A > B |
Child – selects direct children | ul > li { list-style: none; } |
A + B |
Adjacent sibling – selects next sibling | h1 + p { font-size: 14px; } |
A ~ B |
General sibling – selects all siblings | h1 ~ p { color: gray; } |
🔹 3. Attribute Selectors
Target elements based on attributes (super handy for forms & links).
| Selector | Description | Example |
|---|---|---|
[attr] |
Elements with attribute | [title] { color: green; } |
[attr="value"] |
Exact match | input[type="text"] { border: 1px solid; } |
[attr~="value"] |
Contains word | [class~="active"] { color: red; } |
[attr|="value"] |
Starts with value (or value-) |
[lang|="en"] { font-style: italic; } |
[attr^="value"] |
Starts with value | a[href^="https"] { color: blue; } |
[attr$="value"] |
Ends with value | img[src$=".png"] { border: 1px solid; } |
[attr*="value"] |
Contains value | a[href*="login"] { color: red; } |
🔹 4. Pseudo-classes
These selectors apply styles based on state or position.
| Selector | Description | Example |
|---|---|---|
:hover |
On hover | button:hover { background: orange; } |
:focus |
On focus | input:focus { border: 2px solid blue; } |
:active |
On active click | a:active { color: red; } |
:visited |
Visited link | a:visited { color: purple; } |
:first-child |
First child of parent | p:first-child { font-weight: bold; } |
:last-child |
Last child of parent | p:last-child { color: gray; } |
:nth-child(n) |
Matches based on position | li:nth-child(2) { color: red; } |
:only-child |
When element is only child | p:only-child { font-size: 20px; } |
:not(selector) |
Excludes selector | div:not(.active) { opacity: 0.5; } |
:checked |
Checked inputs | input:checked { accent-color: red; } |
:disabled |
Disabled inputs | input:disabled { opacity: 0.5; } |
:required |
Required inputs | input:required { border-color: red; } |
🔹 5. Pseudo-elements
Pseudo-elements let you style parts of an element.
| Selector | Description | Example |
|---|---|---|
::before |
Inserts content before element | p::before { content: "👉 "; } |
::after |
Inserts content after element | p::after { content: " ✅"; } |
::first-letter |
Styles first letter | p::first-letter { font-size: 200%; } |
::first-line |
Styles first line | p::first-line { color: red; } |
::selection |
Styles selected text | ::selection { background: yellow; } |
::placeholder |
Styles input placeholder | input::placeholder { color: gray; } |
::marker |
Styles list markers | li::marker { color: red; } |
🔹 6. Advanced & UI States
These are less common but very powerful.
| Selector | Description | Example |
|---|---|---|
:root |
Root element (<html>) |
:root { --main-color: blue; } |
:target |
Active anchor target | #section:target { background: yellow; } |
:in-range |
Input value in range | input:in-range { border-color: green; } |
:out-of-range |
Input value out of range | input:out-of-range { border-color: red; } |
:read-only |
Read-only inputs | input:read-only { background: lightgray; } |
:read-write |
Editable inputs | input:read-write { background: white; } |
:fullscreen |
Fullscreen mode | :fullscreen { background: black; } |
🖥 Example in Action
html
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child { color: blue; }
ul > li { font-weight: bold; }
a[href^="https"] { color: green; }
button:hover { background: orange; }
p::after { content: " ✅"; }
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<ul>
<li>List item</li>
</ul>
<a href="https://example.com">Secure Link</a>
<button>Click Me</button>
</body>
</html>
Top comments (0)