CSS selectors are more powerful than most developers realize. Beyond the basics, advanced selectors help you write cleaner, more efficient code and reduce your reliance on complex JavaScript.
Here are 5 selectors every frontend dev should be using:
1️⃣ :has() – The Parent Selector
Example:
article:has(img) {
border: 2px solid #4caf50;
}
👉 Style elements based on their children — no JS hacks needed!
2️⃣ :where() – Low Specificity Power
Example:
:where(h1, h2, h3) {
color: #333;
}
👉 Write powerful fallback rules with zero specificity headaches.
3️⃣ The ~ General Sibling Combinator
Example:
h2 ~ p {
margin-top: 0;
}
👉 Target all following siblings, not just the immediate one.
4️⃣ :not() – Exclude Elements Smartly
Example:
nav li:not(.active) {
opacity: 0.7;
}
👉 Style all elements except certain ones — super clean targeting.
5️⃣ Attribute Selectors with Wildcards
Example:
a[href^="https"] {
color: green;
}
👉 Target links starting with “https” — useful for external/internal linking styles.
✅ Want the full Advanced CSS Selectors Cheat Sheet?
I compiled everything — advanced selectors, usage examples, plus practical tips in one sleek PDF to save you time.
👉 Grab your copy here: https://tekisolve.gumroad.com/l/grjet
✏️ Question for you:
What CSS selector trick do you use that most devs don't? Drop it in the comments!
Top comments (2)
Good list, it would be even better if you add some working examples. Like output of code snippets and some use cases like where we can use this.
Thank you :)
You wouldlike this! dev.to/teki_solves_fb72717580279/r...