Frontend Dogma

“selectors” Archive

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

Entry (Sources) and Other Related TopicsDate#
“:only-child” (kev)253
Getting Specific About CSS Specificity (kat)252
,
Making “:visited” More Private (dev)251
, , , ,
Quick Reminder That “:is()” and “:where()” Are Basically the Same With One Key Difference (geo/css)250
,
Reducing CSS Complexity With the “:is()” Pseudo-Class (cfe)249
,
“:in-range” Pseudo-Class (kev)248
,
Future of CSS: “select” Styling Without the Hacks247
, ,
CSS-Only Click Handlers You Might Not Be Using, but You Should246
Decoding CSS Selectors: “:has(:not)” vs. “:not(:has)” (pol)245
,
The “:not” Selector in Use (cit)244
Rainbow Selection in CSS (chr/fro)243
,
Scroll State Queries Are on the Way (and a Bunch More) (kev)242
, , , ,
How to Wait for the “sibling-count()” and “sibling-index()” Functions (mon/css)241
, ,
The “:empty” Pseudo-Class in CSS (cfe)240
CSS “::target-text” for Text Highlighting (tre)239
CSS Selectors Advent Calendar 2024238
,
CSS Selectors: Unlocking Advanced Selectors for Modern Web Design237
Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (eri/pic)236
, ,
CSS “only-child” Instead of Conditional Logic235
,
I Wasted a Day on CSS Selector Performance to Make a Website Load 2 ms Faster (try)234
,
Selecting Previous Siblings (chr/fro)233
Time Travelling CSS With “:target” (css)232
The Undeniable Utility of CSS “:has” (jos)231
,
Double Your Specificity With This One Weird Trick (cir)230
, ,
The “of S” Syntax in “:nth-child()” (mat)229
Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (and)228
,
Thoughts on CSS in 2024 (j9t)227
, , ,
CSS Selectors (geo/css)226
,
Display the Specificity of a CSS Selector (pat/dev)225
, , , , , , , , , , ,
Analyze CSS Selector Performance During Recalculate Style Events (dev)224
, , , , ,
CSS Specificity for WordPress 6.6 (wor)223
, , ,
CSS “:has()”, the God Selector (bru)222
A Brief Note on Highlighted Text (aar)221
, , ,
Misconceptions About CSS Specificity (bra)220
,
Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling (sma)219
, ,
Use “:has()” to Scope CSS218
,
A Primer on the Cascade and Specificity (bel/pic)217
, ,
Managing User Focus With “:focus-visible” (css)216
,
The Power of “:has()” in CSS (css)215
New CSS That Can Actually Be Used in 2024 (tho)214
, , , , , ,
Accessible Forms With Pseudo Classes (css)213
, ,
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)212
,
Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes (zor/css)211
,
CSS “:has()” Interactive Guide (sha)210
,
CSS “::backdrop” Now Inherits From Its Originating Element (bra)209
CSS “:is(.awesome)” (mar/cfe)208
, ,
Using Recursive CSS to Change Styles Based on Depth (cri)207
Big, Beautiful, Beefy Focus States With “:focus-visible” (dav)206
,
Difference Between “getElementByID” and “querySelector”205
,
Combining “:has” and “:only-child” to Change Tab Containers (cri)204
Locking Scroll With “:has()” (rob)203
,
We Can :has It All (hex)202
, ,
Quantity Queries Are Very Easy With CSS “:has()” (chr/fro)201
Browsers Only Update “:target” on Page Load and During Fragment Navigation (sim)200
Surprising Facts About New CSS Selectors (spa/clo)199
Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (sim)198
,
“:fullscreen” Demo Without JavaScript (yoo)197
Prodding Firefox to Update “:has()” Selection (mey)196
, , ,
Styling External Links With Attribute Selectors (mic)195
, ,
Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule (bra/dev)194
,
How to Escape CSS Selectors in JavaScript (ste)193
, , ,
CSS Lobotomized Owl Selector: A Modern Guide (log)192
, ,
Combining “:placeholder-shown” and “:has” (cri)191
,
CSS Selectors: A Visual Guide190
,
Faking a “:snapped” Selector With Scroll-Driven Animations (bra)189
, ,
What Exactly Is [the] “:root” Pseudo-Element in CSS? (zor/css)188
,
Using Multiple Selectors With JavaScript Selector Methods (cfe)187
Style Recalculation Secrets They Don’t Want You to Know (pat/css)186
, ,
How Blink Invalidates Styles When “:has()” [Is] in Use (iga)185
, , , ,
Stop Rewriting Your CSS! Use “:not()” Instead (zor/css)184
, ,
Conditional CSS With “:has” and “:nth-last-child” (sha)183
How “:not()” Chains Multiple Selectors (mdn)182
An Introduction to the “:has()” Selector in CSS (5t3)181
,
Exploring “:has()” Again (mic)180
CSS: Tricks for Targeting Elements With CSS179
,
A CSS Selector to Highlight Clickable Elements (seb)178
When Is “:focus-visible” Visible? (ire)177
,
DevTools: Faster Searching in DevTools With CSS Selectors176
, , , ,
Selecting Previous Siblings With CSS “:has()”175
“(255,255,255)” Is the Highest Specificity (bra)174
,
Use the Child-Element Count in CSS (kev)173
Create a Rainbow-Coloured List With “:nth-of-type()” (rac)172
, ,
More Control Over “:nth-child()” Selections With the “of S” Syntax (bra/dev)171
A “nth-child” CSS Trick (kev)170
,
Level Up Your CSS Skills With the “:has()” Selector (5t3/sma)169
More Real-World Uses for “:has()” (css)168
Solved With “:has()”: Vertical Spacing in Long-Form Text (css)167
Using “:is()” in Complex Selectors Selects More Than You Might Initially Think (bra)166
The Truth About CSS Selector Performance (pat)165
,
Sibling Scopes in CSS, Thanks to “:has()” (bra)164
“:has” Is an Unforgiving Selector (geo/css)163
CSS “:readonly” Is Not for Select Fields (hel)162
CSS “:empty” Isn’t Applicable on Form Fields (hel)161
,
CSS “:has()” Feature Detection With “@ supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” (bra)160
,
Styling a “pre” That Contains a “code” (mey)159
4 Ways CSS “:has()” Can Make Your HTML Forms Even Better (aus)158
, ,
A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” (bra)157
,
Testing for the Support of a Selector (mat)156
,
“:has(:not())” vs. “:not(:has())” (mat)155
,
CSS “:is()”, “:where()”, “:has()”, and “:not()”154
Taming the Cascade With BEM and Modern CSS Selectors (css)153
, , ,
Style a Parent Element Based on Its Number of Children Using CSS “:has()” (bra)152
CSS “:where()” “:is()” the Difference? (hel)151
CSS Specificity for Beginners150
,
The Wasted Potential of CSS Attribute Selectors149
, ,
A Pure CSS Gallery Focus Effect With “:not” (css)148
:where :is CSS?147
“:has()” Opens Up New Possibilities With CSS (kev)146
,
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)145
, ,
I Never Thought This Would Be Possible With CSS (kev)144
,
Detecting CSS Selector Support (mic)143
, ,
Is It “:modal”? (jhe/dev)142
,
How Is This Possible With CSS Only?! (kev)141
, , ,
Parents Counting Children in CSS (mat)140
Using “:has()” as a CSS Parent Selector and Much More (jen/web)139
How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work (cra)138
Modern CSS Selectors (cra)137
“:has()”: The Family Selector (jhe/dev)136
Detecting CSS Selector Support With JavaScript135
, ,
The Advanced Guide to the CSS “:has()” Selector (log)134
,
Solving the “Dangler” Conundrum With Container Queries and “:has()” (dav)133
Understanding CSS “:has()” (mey/iga)132
,
With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (hdv)131
, , ,
The Unlocked Possibilities of the “:has()” Selector (jim)130
A Previous Sibling Selector (jim)129
Managing Specificity With CSS Cascade Layers (zor/css)128
, ,
Style Scoping Versus Shadow DOM: Which Is Fastest? (nol)127
, , , , ,
How and When to Use the CSS “:has” Selector (log)126
Conditionally Styling Selected Elements in a Grid Container (pre/css)125
,
Complex vs. Compound Selectors (mia)124
,
Fun With CSS Combinators (alv)123
:where() :is() :has()? New CSS Selectors That Make Your Life Easier (kil/pol)122
Master the “:nth-child()” Pseudo-Class (zor/css)121
,
Practical Use Cases for “:has()” Pseudo-Class (zor/css)120
,
Intro to CSS Parent Selector—“:has()” (zor/css)119
, ,
CSS Parent Selector (sha)118
CSS “:has()” a Parent Selector Now117
Animated Grid Tracks With “:has()” (mic)116
, ,
How to Match HTML Elements With an Indeterminate State (ste)115
, ,
CSS “:has” (dav)114
Deep Dive Into the CSS “:where()” Function (log)113
,
The Focus-Indicated Pseudo-Class “:focus-visible” (web)112
,
Here’s What I Didn’t Know About “:where()” (mat)111
Comparing CSS Specificity Values (kil)110
,
The CSS “:has()” Pseudo-Class, aka Parent Selector109
The CSS “:has()” Selector Is Way More Than a “Parent Selector” (bra)108
“@ supports selector()” (chr/css)107
,
Native CSS Nesting: What You Need to Know (log)106
,
7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS (css)105
,
Simpler Block Spacing in WordPress With “:is()” and “:where()” (mic)104
,
Reducing the Need for Pseudo-Elements (sma)103
Next-Level List Bullets With CSS “::marker”102
,
CSS Nesting, Specificity, and You (kil)101
, ,
Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma)100
Can I “:has()” (bka)99
,
Custom Attributes Are Fast Good and Cheap98
,
A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (5t3/sma)97
, ,
You Want Enabling CSS Selectors, Not Disabling Ones (cit)96
Things You Can Do With CSS Today (bel/sma)95
, , , ,
CSS Selectors in Go94
, , ,
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
Tomorrow’s CSS Today: 8 Techniques They Don’t Want You to Know13
, , ,
CSS: Selector Variables (j9t)12
,
Getting Specific With CSS (tka)11
,
The Great Specificity Swindle (ate)10
,
CSS Specificity: Things You Should Know (sma)9
, ,
Who Ordered the Link States? (mey)8
,
Top CSS Tips (jus)7
, ,
By Logical Extension (bee)6
,
CSS Specificity Visualizer (ise)5
, , , , , ,
CSS Specificity Calculator (pol)4
, , , , ,