Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s genocide on the Palestinian people and the destruction of Palestine 🇵🇸 Protest, boycott, ostracize. Hide

Frontend Dogma

“selectors” News Archive

Supertopics:  (non-exhaustive) · glossary look-up: “selectors”

Entry (Sources) and Other Related TopicsDate#
Why Is CSS “::first-letter” Not Working? (whi)272
“:has()” Is More Than a Parent Selector (kev)271
,
“:nth-last-child” (kev)270
Quantity Query Carousel (chr/fro)269
, ,
“:out-of-range” (kev)268
“:placeholder-shown” (kev)267
What Is [the] CSS Owl Selector (“* + *”)? (zor/css)266
,
HTML Oddities: Does the Order of Attribute Values Matter? (ede)265
, ,
“:only-child” (kev)264
Getting Specific About CSS Specificity (kat)263
,
Making “:visited” More Private (dev)262
, , , ,
Quick Reminder That “:is()” and “:where()” Are Basically the Same With One Key Difference (geo/css)261
,
Reducing CSS Complexity With the “:is()” Pseudo-Class (cfe)260
,
“:in-range” Pseudo-Class (kev)259
,
Future of CSS: “select” Styling Without the Hacks258
, ,
Decoding CSS Selectors: “:has(:not)” vs. “:not(:has)” (pol)257
,
CSS-Only Click Handlers You Might Not Be Using, but You Should256
The “:not” Selector in Use (cit)255
Rainbow Selection in CSS (chr/fro)254
,
Scroll State Queries Are on the Way (and a Bunch More) (kev)253
, , , ,
How to Wait for the “sibling-count()” and “sibling-index()” Functions (mon/css)252
, ,
The “:empty” Pseudo-Class in CSS (cfe)251
CSS “::target-text” for Text Highlighting (tre)250
CSS Selectors Advent Calendar 2024249
,
CSS Selectors: Unlocking Advanced Selectors for Modern Web Design248
Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (eri/pic)247
, ,
CSS “only-child” Instead of Conditional Logic246
,
I Wasted a Day on CSS Selector Performance to Make a Website Load 2 ms Faster (try)245
,
Selecting Previous Siblings (chr/fro)244
Time Travelling CSS With “:target” (css)243
The Undeniable Utility of CSS “:has” (jos)242
,
Double Your Specificity With This One Weird Trick (cir)241
, ,
The “of S” Syntax in “:nth-child()” (mat)240
Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (and)239
,
Thoughts on CSS in 2024 (j9t)238
, , ,
CSS Selectors (geo/css)237
,
Display the Specificity of a CSS Selector (pat/dev)236
, , , , , , , , , , ,
Analyze CSS Selector Performance During Recalculate Style Events (dev)235
, , , , ,
CSS Specificity for WordPress 6.6 (wor)234
, , ,
CSS “:has()”, the God Selector (bru)233
A Brief Note on Highlighted Text (aar)232
, , ,
Misconceptions About CSS Specificity (bra)231
,
Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling (ami/sma)230
, ,
Use “:has()” to Scope CSS229
,
A Primer on the Cascade and Specificity (bel/pic)228
, ,
Managing User Focus With “:focus-visible” (css)227
,
The Power of “:has()” in CSS (css)226
New CSS That Can Actually Be Used in 2024 (tho)225
, , , , , ,
Accessible Forms With Pseudo Classes (css)224
, ,
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)223
,
Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes (zor/css)222
,
CSS “:has()” Interactive Guide (sha)221
,
CSS “::backdrop” Now Inherits From Its Originating Element (bra)220
CSS “:is(.awesome)” (mar/cfe)219
, ,
Using Recursive CSS to Change Styles Based on Depth (cri)218
Big, Beautiful, Beefy Focus States With “:focus-visible” (dav)217
,
Difference Between “getElementByID” and “querySelector”216
,
Combining “:has” and “:only-child” to Change Tab Containers (cri)215
Locking Scroll With “:has()” (rob)214
,
We Can :has It All (hex)213
, ,
Quantity Queries Are Very Easy With CSS “:has()” (chr/fro)212
Browsers Only Update “:target” on Page Load and During Fragment Navigation (sim)211
Surprising Facts About New CSS Selectors (spa/clo)210
Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (sim)209
,
“:fullscreen” Demo Without JavaScript (yoo)208
Prodding Firefox to Update “:has()” Selection (mey)207
, , ,
Styling External Links With Attribute Selectors (mic)206
, ,
Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule (bra/dev)205
,
How to Escape CSS Selectors in JavaScript (ste)204
, , ,
CSS Lobotomized Owl Selector: A Modern Guide (log)203
, ,
Combining “:placeholder-shown” and “:has” (cri)202
,
CSS Selectors: A Visual Guide201
,
Faking a “:snapped” Selector With Scroll-Driven Animations (bra)200
, ,
What Exactly Is [the] “:root” Pseudo-Element in CSS? (zor/css)199
,
Using Multiple Selectors With JavaScript Selector Methods (cfe)198
Style Recalculation Secrets They Don’t Want You to Know (pat/css)197
, ,
How Blink Invalidates Styles When “:has()” [Is] in Use (iga)196
, , , ,
Stop Rewriting Your CSS! Use “:not()” Instead (zor/css)195
, ,
Conditional CSS With “:has” and “:nth-last-child” (sha)194
How “:not()” Chains Multiple Selectors (mdn)193
An Introduction to the “:has()” Selector in CSS (5t3)192
,
Exploring “:has()” Again (mic)191
CSS: Tricks for Targeting Elements With CSS190
,
A CSS Selector to Highlight Clickable Elements (seb)189
When Is “:focus-visible” Visible? (ire)188
,
DevTools: Faster Searching in DevTools With CSS Selectors187
, , , ,
Selecting Previous Siblings With CSS “:has()”186
Use the Child-Element Count in CSS (kev)185
“(255,255,255)” Is the Highest Specificity (bra)184
,
Create a Rainbow-Coloured List With “:nth-of-type()” (rac)183
, ,
More Control Over “:nth-child()” Selections With the “of S” Syntax (bra/dev)182
A “nth-child” CSS Trick (kev)181
,
Level Up Your CSS Skills With the “:has()” Selector (5t3/sma)180
More Real-World Uses for “:has()” (css)179
Solved With “:has()”: Vertical Spacing in Long-Form Text (css)178
Using “:is()” in Complex Selectors Selects More Than You Might Initially Think (bra)177
The Truth About CSS Selector Performance (pat/mic)176
,
Sibling Scopes in CSS, Thanks to “:has()” (bra)175
“:has” Is an Unforgiving Selector (geo/css)174
CSS “:readonly” Is Not for Select Fields (hel)173
CSS “:empty” Isn’t Applicable on Form Fields (hel)172
,
CSS “:has()” Feature Detection With “@ supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” (bra)171
,
Styling a “pre” That Contains a “code” (mey)170
4 Ways CSS “:has()” Can Make Your HTML Forms Even Better (aus)169
, ,
A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” (bra)168
,
Testing for the Support of a Selector (mat)167
,
“:has(:not())” vs. “:not(:has())” (mat)166
,
CSS “:is()”, “:where()”, “:has()”, and “:not()”165
Taming the Cascade With BEM and Modern CSS Selectors (css)164
, , ,
Style a Parent Element Based on Its Number of Children Using CSS “:has()” (bra)163
CSS “:where()” “:is()” the Difference? (hel)162
CSS Specificity for Beginners (nic)161
,
The Wasted Potential of CSS Attribute Selectors160
, ,
A Pure CSS Gallery Focus Effect With “:not” (css)159
:where :is CSS?158
“:has()” Opens Up New Possibilities With CSS (kev)157
,
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)156
, ,
I Never Thought This Would Be Possible With CSS (kev)155
,
Detecting CSS Selector Support (mic)154
, ,
Is It “:modal”? (jhe/dev)153
,
How Is This Possible With CSS Only?! (kev)152
, , ,
Parents Counting Children in CSS (mat)151
Using “:has()” as a CSS Parent Selector and Much More (jen/web)150
How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work (cra)149
Modern CSS Selectors (cra)148
“:has()”: The Family Selector (jhe/dev)147
The Advanced Guide to the CSS “:has()” Selector (log)146
,
Detecting CSS Selector Support With JavaScript145
, ,
Solving the “Dangler” Conundrum With Container Queries and “:has()” (dav)144
Understanding CSS “:has()” (mey/iga)143
,
With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (hdv)142
, , ,
The Unlocked Possibilities of the “:has()” Selector (jim)141
A Previous Sibling Selector (jim)140
Managing Specificity With CSS Cascade Layers (zor/css)139
, ,
Style Scoping Versus Shadow DOM: Which Is Fastest? (nol)138
, , , , ,
How and When to Use the CSS “:has” Selector (log)137
Conditionally Styling Selected Elements in a Grid Container (pre/css)136
,
Complex vs. Compound Selectors (mia)135
,
Fun With CSS Combinators (alv)134
:where() :is() :has()? New CSS Selectors That Make Your Life Easier (kil/pol)133
Master the “:nth-child()” Pseudo-Class (zor/css)132
,
Practical Use Cases for “:has()” Pseudo-Class (zor/css)131
,
Intro to CSS Parent Selector—“:has()” (zor/css)130
, ,
CSS Parent Selector (sha)129
CSS “:has()” a Parent Selector Now128
Animated Grid Tracks With “:has()” (mic)127
, ,
How to Match HTML Elements With an Indeterminate State (ste)126
, ,
CSS “:has” (dav)125
Deep Dive Into the CSS “:where()” Function (log)124
,
The Focus-Indicated Pseudo-Class “:focus-visible” (web)123
,
Here’s What I Didn’t Know About “:where()” (mat)122
Comparing CSS Specificity Values (kil)121
,
The CSS “:has()” Pseudo-Class, aka Parent Selector120
The CSS “:has()” Selector Is Way More Than a “Parent Selector” (bra)119
“@ supports selector()” (chr/css)118
,
Native CSS Nesting: What You Need to Know (log)117
,
7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS (css)116
,
Simpler Block Spacing in WordPress With “:is()” and “:where()” (mic)115
,
Reducing the Need for Pseudo-Elements (sma)114
Next-Level List Bullets With CSS “::marker”113
,
CSS Nesting, Specificity, and You (kil)112
, ,
Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma)111
Can I “:has()” (bka)110
,
Custom Attributes Are Fast Good and Cheap109
,
A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (5t3/sma)108
, ,
You Want Enabling CSS Selectors, Not Disabling Ones (cit)107
Things You Can Do With CSS Today (bel/sma)106
, , , ,
Happier HTML5 Form Validation in Vue (chr/css)105
, , , ,
Responsive Styling Using Attribute Selectors (css)104
, ,
CSS Functions Guide (eri/css)103
, ,
Select an Element With a Non-Empty Attribute (chr/css)102
, ,
A Use Case for a Parent Selector (chr/css)101
CSS “:not()” With Multiple Classes (chr/css)100
CSS Selectors in Go99
, , ,
Styling Based on Scroll Position (chr/css)98
,
Splicing HTML’s DNA With CSS Attribute Selectors (sma)97
, ,
“::before” vs “:before” (chr/css)96
, ,
Solved With CSS! Logical Styling Based on the Number of Given Elements (una/css)95
BEM for Beginners: Why You Need BEM (sma)94
,
Selectors Level 4 (fan+/w3c)93
,
“Stop Using CSS Selectors for Non-CSS” (chr/css)92
, , ,
Performance of CSS Selectors Is Still Irrelevant (j9t)91
,
Upgrade Your Project With CSS Selector and Custom Attributes90
, ,
CSS: The Reason Why Selectors Should Be Ordered, Too (j9t)89
,
Some Extremely Handy “:nth-child” Recipes as Sass Mixins (css)88
, , ,
CSS Tip: Use “:not” to Save Time and Lines of Code (sas)87
,
CSS Selectors: Specificity86
,
CSS Selectors: Pseudo-Elements85
CSS Selectors: Attribute Selectors84
,
CSS Selectors: Combinators83
Style List Markers in CSS (chr/css)82
,
Spoooooky CSS Selectors (chr/css)81
,
Using CSS Mod Queries With Range Selectors (ali)80
You Can Kinda Invent Your Own Weird Design Language With Attributes and Attribute Selectors (chr/css)79
, , ,
Precedence in CSS (When Order of CSS Matters) (chr/css)78
,
An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (sma)77
, ,
On “:not” and Specificity (ire)76
,
CSS Specificity Is Base-Infinite (chr/css)75
,
Constructing CSS Quantity Queries on the Fly (rea/sma)74
Quantity Ordering With CSS (rea/sma)73
, ,
12 Little-Known CSS Facts (the Sequel) (lou)72
, , , , ,
The Future Generation of CSS Selectors: Level 4 (lou)71
,
Extending in Sass Without Creating a Mess (sma)70
, ,
Selector Specificity With CSS Preprocessors69
, , , ,
Strategies for Keeping CSS Specificity Low (chr/css)68
, ,
Specificity Graphs (jus)67
, ,
The Specificity Graph (css)66
, ,
Axiomatic CSS and Lobotomized Owls (hey/ali)65
HTML5 Forms: CSS (cra)64
, , ,
Universal Selector (CSS Selector)63
CSS Selectors Cheat Sheet62
, ,
“:first-child” (CSS Selector)61
The Current Generation of CSS3 Selectors (lou)60
,
Semantic CSS With Intelligent Selectors (hey/sma)59
, ,
How to Order CSS Selectors (j9t)58
, , ,
CSS Selectors Level 4: The Path to CSS457
Sneak Peek Into the Future: CSS Selectors, Level 4 (sma)56
Pseudo Element Animations/Transitions Bug Fixed in WebKit (chr/css)55
, , , , ,
Getting to Know CSS3 Selectors: Structural Pseudo-Classes54
,
Off Canvas Menu With CSS “:target” (chr/css)53
,
CSS “:target” for Off-Screen Designs (css)52
, , ,
Learning to Love the Boring Bits of CSS (sto/ali)51
, ,
Using the CSS “:target” Selector (chr/css)50
,
How to Put Your CSS3 on “:target” (cra)49
Multiple Attribute Values (chr/css)48
, ,
5 Tips for More Efficient jQuery Selectors (cra)47
,
Discover What’s New in CSS 4 (wir)46
“var” Selector45
,
Little CSS Stuff Newcomers Get Confused About (chr/css)44
, ,
Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (lou/sma)43
, ,
Useful “:nth-child” Recipes (chr/css)42
,
Better Semantics With CSS Combinators and Selectors41
The Difference Between “:nth-child” and “:nth-of-type” (chr/css)40
,
How to Use CSS3 Pseudo-Classes (sma)39
, ,
Top 50 jQuery Selectors38
Styling Texty Inputs Only (chr/css)37
,
Why Use Classes or IDs on the HTML Element? (chr/css)36
, , , ,
Why We Don’t Have a Parent Selector (jus)35
,
Efficiently Rendering CSS (chr/css)34
, ,
Adding Content Using CSS3 (the)33
,
CSS Specificity and Inheritance (sma)32
,
Meet the Pseudo Class Selectors (chr/css)31
The Skinny on CSS Attribute Selectors (chr/css)30
, ,
How “nth-child” Works (chr/css)29
Zen Coding: Generating HTML From Selectors (dal/aja)28
, ,
Taming Advanced CSS Selectors (sma)27
,
Simplifying CSS Selectors26
,
How to Override Inline CSS Styles (cra)25
, ,
Performance of CSS Selectors Is Irrelevant (j9t)24
,
Is Optimizing CSS Selectors Worth It? (dal/aja)23
, ,