Frontend Dogma

“selectors” Archive

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

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