Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s oppression and killing of Palestinians and the occupation and destruction of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“selectors” News Archive

Definition, related topics, and tag feed

Definition · Supertopics:  (non-exhaustive) · “selectors” RSS feed (per email)

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