This has been generated by ChatGPT, and here for my reference.
🧠 CSS Selectors Cheat Sheet
Organized by selector type with descriptions, examples, and performance tips.
🟩 1. Simple Selectors
| Selector |
Description |
Example |
Matches |
Performance |
* |
Universal selector |
* |
All elements |
🔴 Slow |
element |
Type selector |
div |
All <div> elements |
🟢 Fast |
#id |
ID selector |
#header |
Element with id="header"
|
🟢 Fastest |
.class |
Class selector |
.btn |
Elements with class btn
|
🟢 Fast |
[attr] |
Attribute present |
[disabled] |
Elements with that attribute |
🔴 Slow |
[attr=value] |
Attribute equals |
[type="text"] |
Attribute with exact value |
🟡 Moderate |
🟨 2. Combinator Selectors (Structural Relationships)
| Selector |
Description |
Example |
Matches |
Performance |
A B |
Descendant |
div p |
<p> inside <div> (any depth) |
🟡 Moderate |
A > B |
Child |
ul > li |
Direct child only |
🟢 Fast |
A + B |
Adjacent sibling |
h1 + p |
First <p> after <h1>
|
🟢 Fast |
A ~ B |
General sibling |
h1 ~ p |
All <p> after <h1>
|
🟡 Moderate |
🟪 3. Functional Pseudo-Classes
Used for structural logic, conditions, and grouping.
| Selector |
Description |
Example |
Matches |
Arguments |
Performance |
:nth-child(n) |
Nth child (any type) |
li:nth-child(2n) |
Every 2nd <li>
|
n, even, odd, 2n+1 etc. |
🟡 Moderate |
:nth-of-type(n) |
Nth child of same type |
p:nth-of-type(odd) |
Odd-numbered <p> elements |
Same as above |
🟡 Moderate |
:nth-last-child(n) |
Nth child from end |
li:nth-last-child(2) |
2nd-last <li>
|
Same as above |
🟡 Moderate |
:nth-last-of-type(n) |
Nth of type from end |
p:nth-last-of-type(1) |
Last <p> among siblings |
Same as above |
🟡 Moderate |
:first-child |
First child of parent |
div:first-child |
If first child is a <div>
|
— |
🟡 Moderate |
:last-child |
Last child of parent |
li:last-child |
If last child is a <li>
|
— |
🟡 Moderate |
:not(selector) |
Exclude matches |
:not(.active) |
All except .active
|
Any selector |
🔴 Slow |
:is(a, b) |
OR logic |
:is(h1, h2) |
h1 or h2
|
Comma-separated list |
🟢 Fast |
:where(a, b) |
OR (zero specificity) |
:where(nav, aside) |
Like :is, but no specificity |
Comma-separated list |
🟢 Fast |
:has(selector) |
Parent with matching child |
div:has(img) |
<div> with <img> inside |
Any selector |
🔴 Slow (limited) |
🔢 Special Arguments for :nth-* Functions
| Argument |
Meaning |
Matches |
even |
Every even-numbered item |
2nd, 4th, 6th... |
odd |
Every odd-numbered item |
1st, 3rd, 5th... |
n |
All items (base pattern) |
0, 1, 2, 3... |
2n |
Every 2nd item |
2, 4, 6... |
2n+1 |
Odd items |
Same as odd
|
3n-1 |
Custom pattern |
2, 5, 8... |
🟦 4. UI State Pseudo-Classes
| Selector |
Description |
Example |
Matches |
Performance |
:hover |
On mouse hover |
a:hover |
Link when hovered |
🟢 Fast |
:focus |
Element has focus |
input:focus |
Focused input |
🟢 Fast |
:checked |
Checked input |
input:checked |
Checked checkbox or radio |
🟢 Fast |
:disabled |
Disabled input/button |
button:disabled |
Disabled form controls |
🟢 Fast |
:empty |
No content |
div:empty |
Elements with no children or text |
🟡 Moderate |
🟥 5. Pseudo-Elements
| Selector |
Description |
Example |
Matches |
Performance |
::before |
Insert content before |
p::before |
Virtual content before |
🟢 Fast |
::after |
Insert content after |
p::after |
Virtual content after |
🟢 Fast |
::marker |
List marker |
li::marker |
Bullet/number styling |
🟢 Fast |
::placeholder |
Input placeholder style |
input::placeholder |
Placeholder text |
🟢 Fast |
📌 Summary
| Category |
Includes |
| 🟩 Simple Selectors |
*, element, .class, #id, [attr]
|
| 🟨 Combinators |
Descendant, Child, Siblings |
| 🟪 Functional Pseudo-classes |
:nth-*, :not(), :is(), :has()
|
| 🔢 Special Arguments |
even, odd, n, 2n, 3n-1
|
| 🟦 UI State |
:hover, :focus, :checked, etc. |
| 🟥 Pseudo-elements |
::before, ::after, ::placeholder
|
Top comments (0)