Tech is political: The people under attack in Palestine 🇵🇸, Iran 🇮🇷, and Lebanon 🇱🇧 are people like us. They’re our brothers and sisters, too. Read up on their history, scrutinize what you’re told, and demand that they be respected. Hide

Frontend Dogma

“selectors” News Archive

Definition, related topics, and tag feed

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

Entry (Sources) and Additional TopicsDate#
Can’t Touch the DOM? Reach for “:has()” to Style Any Element (tho)312
css
The Shifting Line Between CSS States and JavaScript Events (dxn/css)311
css, javascript, state-management, events
CSS “n of” Selectors for Conditional Validation (pre/fro)310
css, conditionals, validation
Let’s Use the Nonexistent “::nth-Letter” Selector Now (css)309
css
Unicode Variation Selectors (css)308
css, unicode, emoji
Alternatives to the “!important” Keyword (css)307
css, cascade
The Different Ways to Select “<html>” in CSS (dxn/css)306
html, css
Selectors Level 5 (fan+/w3c)305
css, standards
Style Headings Using the CSS “:heading” Pseudo-Class (stu)304
headings, css
How to Style the New “::search-text” and Other Highlight-y Pseudo-Elements (dxn/css)303
how-tos, css
Focus Rings With Nested “contrast-color()”? (dav)302
css, functions, focus, contrast
Should We Even Have “:closed”? (sun/css)301
css, disclosure-widgets
CSS “:interest-invoker” and “:interest-target” Pseudo-Classes (tre)300
css, forms
My CSS Selector Strategy (mal)299
css, principles
Frontend News #17: Why Pseudo-Elements Don’t Work With “:is()”, the Advantages of OKLCH, and More (zor/css)298
videos, css, oklch
25 New and Rad Features of CSS (arg/cas)297
videos, css, transitions, animations, cascade, functions, colors, scrolling
Top 11 CSS Tricks Every Web Developer Should Know296
css, custom-properties, layout, animations, positioning, dark-mode, resets, tips-and-tricks
CSS :is() :where() the Magic Happens (mat)295
css, cascade
This Website Has No Class (aaa)294
css, web-components
Styling Siblings With CSS Has Never Been Easier: Experimenting With “sibling-count” and “sibling-index” (uti)293
css, functions
Frontend News #16: “:heading” Pseudo-Class, Faded Text Effects, “box-sizing” (zor/css)292
videos, css, box-model, effects, view-transitions
One List to Rule Them All (arg)291
css, functions, units, learning, link-lists
Why Is CSS “::first-letter” Not Working? (whi)290
css
“:has()” Is More Than a Parent Selector (kev)289
videos, css
“:nth-last-child” (kev)288
css
Quantity Query Carousel (chr/fro)287
css, grids, layout
“:out-of-range” (kev)286
css
“:placeholder-shown” (kev)285
css
What Is [the] CSS Owl Selector (“* + *”)? (zor/css)284
videos, css
HTML Oddities: Does the Order of Attribute Values Matter? (ede)283
html, attributes, css
“:only-child” (kev)282
css
Getting Specific About CSS Specificity (kat)281
css, cascade
Making “:visited” More Private280
css, privacy, chrome, browsers
Quick Reminder That “:is()” and “:where()” Are Basically the Same With One Key Difference (geo/css)279
css, cascade
Reducing CSS Complexity With the “:is()” Pseudo-Class (cfe)278
css, complexity
“:in-range” Pseudo-Class (kev)277
css, forms
Future of CSS: “select” Styling Without the Hacks276
css, forms, html
Decoding CSS Selectors: “:has(:not)” vs. “:not(:has)” (pol)275
css, comparisons
CSS-Only Click Handlers You Might Not Be Using, but You Should274
css
The “:not” Selector in Use (cit)273
css
Rainbow Selection in CSS (chr/fro)272
css, effects
Scroll State Queries Are on the Way (and a Bunch More) (kev)271
videos, css, container-queries, functions, scrolling
How to Wait for the “sibling-count()” and “sibling-index()” Functions (mon/css)270
how-tos, css, functions
The “:empty” Pseudo-Class in CSS (cfe)269
css
CSS “::target-text” for Text Highlighting (tre)268
css
CSS Selectors Advent Calendar 2024267
css, examples
CSS Selectors: Unlocking Advanced Selectors for Modern Web Design266
css
Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (eri/pic)265
web-components, css, grids
CSS “only-child” Instead of Conditional Logic264
css, conditionals
I Wasted a Day on CSS Selector Performance to Make a Website Load 2 ms Faster (try)263
css, performance
Selecting Previous Siblings (chr/fro)262
css
The Undeniable Utility of CSS “:has” (jos)261
css, examples
Time Travelling CSS With “:target” (css)260
css
Double Your Specificity With This One Weird Trick (cir)259
css, cascade, tips-and-tricks
The “of S” Syntax in “:nth-child()” (mat)258
css
Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (and)257
web-components, css
CSS Selectors (geo/css)256
css, overviews
Thoughts on CSS in 2024 (j9t)255
css, resets, logical-properties, custom-properties
Analyze CSS Selector Performance During Recalculate Style Events254
browsers, chrome, dev-tools, performance, css
Display the Specificity of a CSS Selector (pat/dev)253
css, cascade, dev-tools, browsers, chrome, edge, safari, firefox
CSS Specificity for WordPress 6.6 (wor)252
discussions, wordpress, css, cascade
CSS “:has()”, the God Selector (bru)251
css
A Brief Note on Highlighted Text (aar)250
accessibility, colors, contrast, css
Misconceptions About CSS Specificity (bra)249
css, cascade
Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling (ami/sma)248
css, html, techniques
Use “:has()” to Scope CSS247
css, scope
A Primer on the Cascade and Specificity (bel/pic)246
introductions, css, cascade
Managing User Focus With “:focus-visible” (css)245
css, focus
The Power of “:has()” in CSS (css)244
css
New CSS That Can Actually Be Used in 2024 (tho)243
css, logical-properties, container-queries, nesting, functions, cascade, grids
Accessible Forms With Pseudo Classes (css)242
accessibility, forms, css
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)241
css, examples
Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes (zor/css)240
videos, css
CSS “:has()” Interactive Guide (sha)239
guides, css
CSS “::backdrop” Now Inherits From Its Originating Element (bra)238
css
CSS “:is(.awesome)” (mar/cfe)237
videos, css, techniques
Using Recursive CSS to Change Styles Based on Depth (cri)236
css
Big, Beautiful, Beefy Focus States With “:focus-visible” (dav)235
css, focus
Difference Between “getElementByID” and “querySelector”234
javascript, css
Combining “:has” and “:only-child” to Change Tab Containers (cri)233
css
Locking Scroll With “:has()” (rob)232
css, scrolling
We Can :has It All (hex)231
css, browsers, support
Quantity Queries Are Very Easy With CSS “:has()” (chr/fro)230
css
Browsers Only Update “:target” on Page Load and During Fragment Navigation (sim)229
css
Surprising Facts About New CSS Selectors (spa/clo)228
css
“:fullscreen” Demo Without JavaScript (yoo)227
css
Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (sim)226
css, forms
Prodding Firefox to Update “:has()” Selection (mey)225
css, firefox, support
Styling External Links With Attribute Selectors (mic)224
links, css, attributes
Limit the Reach of Your Selectors With the CSS “@scope” At-Rule (bra)223
css, scope
How to Escape CSS Selectors in JavaScript (ste)222
how-tos, css, javascript, escaping
CSS Lobotomized Owl Selector: A Modern Guide (log)221
css, guides, history
Combining “:placeholder-shown” and “:has” (cri)220
css, forms
CSS Selectors: A Visual Guide219
guides, css
Faking a “:snapped” Selector With Scroll-Driven Animations (bra)218
css, animations, scrolling
What Exactly Is [the] “:root” Pseudo-Element in CSS? (zor/css)217
videos, css
Using Multiple Selectors With JavaScript Selector Methods (cfe)216
javascript, methods
Style Recalculation Secrets They Don’t Want You to Know (pat/css)215
videos, css, performance
How Blink Invalidates Styles When “:has()” [Is] in Use (iga)214
browsers, browser-engines, rendering, blink, css
Stop Rewriting Your CSS! Use “:not()” Instead (zor/css)213
videos, css, maintenance
Conditional CSS With “:has” and “:nth-last-child” (sha)212
css
How “:not()” Chains Multiple Selectors (mdn)211
css
An Introduction to the “:has()” Selector in CSS (5t3)210
introductions, css
Exploring “:has()” Again (mic)209
css
CSS: Tricks for Targeting Elements With CSS208
css, tips-and-tricks
A CSS Selector to Highlight Clickable Elements (seb)207
css
When Is “:focus-visible” Visible? (ire)206
accessibility, css
DevTools: Faster Searching in DevTools With CSS Selectors205
dev-tools, css, browsers, chrome
Selecting Previous Siblings With CSS “:has()”204
css
Use the Child-Element Count in CSS (kev)203
css
“(255,255,255)” Is the Highest Specificity (bra)202
css, cascade
Create a Rainbow-Coloured List With “:nth-of-type()” (rac)201
lists, css, colors
More Control Over “:nth-child()” Selections With the “of S” Syntax (bra)200
css
A “nth-child” CSS Trick (kev)199
css, tips-and-tricks
Level Up Your CSS Skills With the “:has()” Selector (5t3/sma)198
css
More Real-World Uses for “:has()” (css)197
css
Solved With “:has()”: Vertical Spacing in Long-Form Text (css)196
css
Using “:is()” in Complex Selectors Selects More Than You Might Initially Think (bra)195
css
The Truth About CSS Selector Performance (pat)194
css, performance
Sibling Scopes in CSS, Thanks to “:has()” (bra)193
css
“:has” Is an Unforgiving Selector (geo/css)192
css
CSS “:empty” Isn’t Applicable on Form Fields (hel)191
css, forms
CSS “:readonly” Is Not for Select Fields (hel)190
css
CSS “:has()” Feature Detection With “@supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” (bra)189
css, feature-detection
Styling a “pre” That Contains a “code” (mey)188
css
4 Ways CSS “:has()” Can Make Your HTML Forms Even Better (aus)187
css, html, forms
A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” (bra)186
css, polyfills
Testing for the Support of a Selector (mat)185
css, support
“:has(:not())” vs. “:not(:has())” (mat)184
css, comparisons
CSS “:is()”, “:where()”, “:has()”, and “:not()”183
css
Taming the Cascade With BEM and Modern CSS Selectors (css)182
css, cascade, naming, bem
Style a Parent Element Based on Its Number of Children Using CSS “:has()” (bra)181
css
CSS “:where()” “:is()” the Difference? (hel)180
css
CSS Specificity for Beginners (nic)179
css, cascade
The Wasted Potential of CSS Attribute Selectors178
css, attributes, bem
A Pure CSS Gallery Focus Effect With “:not” (css)177
css
:where :is CSS?176
css
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)175
css, examples, cheat-sheets
“:has()” Opens Up New Possibilities With CSS (kev)174
videos, css
I Never Thought This Would Be Possible With CSS (kev)173
videos, css
Detecting CSS Selector Support (mic)172
css, support, feature-detection
Is It “:modal”? (jhe)171
css, modals
How Is This Possible With CSS Only?! (kev)170
videos, css, custom-properties, animations
Parents Counting Children in CSS (mat)169
css
Using “:has()” as a CSS Parent Selector and Much More (jen/web)168
css
How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work (cra)167
css
Modern CSS Selectors (cra)166
css
“:has()”: The Family Selector (jhe)165
css
Detecting CSS Selector Support With JavaScript164
css, feature-detection, support
The Advanced Guide to the CSS “:has()” Selector (log)163
guides, css
Solving the “Dangler” Conundrum With Container Queries and “:has()” (dav)162
css
Understanding CSS “:has()” (mey/iga)161
videos, css
With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (hdv)160
css, accessibility, keyboard-navigation, focus
The Unlocked Possibilities of the “:has()” Selector (jim)159
css
A Previous Sibling Selector (jim)158
css
Managing Specificity With CSS Cascade Layers (zor/css)157
videos, css, cascade
Style Scoping Versus Shadow DOM: Which Is Fastest? (nol)156
scope, dom, shadow-dom, performance, comparisons, metrics
How and When to Use the CSS “:has” Selector (log)155
css
Groking “:active”, “:focus”, and “:focus-visible” Pseudo-Classes (thi)154
css, focus
Complex vs. Compound Selectors (mia)153
css, comparisons
Conditionally Styling Selected Elements in a Grid Container (pre/css)152
css, grids
Fun With CSS Combinators (alv)151
css
:where() :is() :has()? New CSS Selectors That Make Your Life Easier (kil/pol)150
css
Master the “:nth-child()” Pseudo-Class (zor/css)149
videos, css
Practical Use Cases for “:has()” Pseudo-Class (zor/css)148
videos, css
Intro to CSS Parent Selector—“:has()” (zor/css)147
videos, introductions, css
CSS Parent Selector (sha)146
css
CSS “:has()” a Parent Selector Now145
css
Animated Grid Tracks With “:has()” (mic)144
css, layout, grids
How to Match HTML Elements With an Indeterminate State (ste)143
how-tos, html, css
CSS “:has” (dav)142
css
Deep Dive Into the CSS “:where()” Function (log)141
css, deep-dives
The Focus-Indicated Pseudo-Class “:focus-visible” (web)140
css, focus
Here’s What I Didn’t Know About “:where()” (mat)139
css
Comparing CSS Specificity Values (kil)138
css, cascade
The CSS “:has()” Pseudo-Class, aka Parent Selector137
css
The CSS “:has()” Selector Is Way More Than a “Parent Selector” (bra)136
css
“@supports selector()” (chr/css)135
css, support
Native CSS Nesting: What You Need to Know (log)134
css, nesting
7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS (css)133
css, generated-content
Simpler Block Spacing in WordPress With “:is()” and “:where()” (mic)132
wordpress, css
Reducing the Need for Pseudo-Elements (sma)131
css
Next-Level List Bullets With CSS “::marker”130
lists, css
CSS Nesting, Specificity, and You (kil)129
css, cascade, nesting
Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma)128
css
Can I “:has()” (bka)127
css, igalia
Custom Attributes Are Fast Good and Cheap126
attributes, css
A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (5t3/sma)125
guides, css, support
You Want Enabling CSS Selectors, Not Disabling Ones (cit)124
css
Things You Can Do With CSS Today (bel/sma)123
css, masonry, layout, functions, units
Happier HTML5 Form Validation in Vue (chr/css)122
html, forms, validation, css, vuejs
Responsive Styling Using Attribute Selectors (css)121
css, attributes, responsive-design
CSS Functions Guide (eri/css)120
guides, css, functions
Select an Element With a Non-Empty Attribute (chr/css)119
css, custom-data, html
A Use Case for a Parent Selector (chr/css)118
css
CSS “:not()” With Multiple Classes (chr/css)117
css
CSS Selectors in Go116
css, go, parsing, metrics
Styling Based on Scroll Position (chr/css)115
css, scrolling
Splicing HTML’s DNA With CSS Attribute Selectors (sma)114
html, attributes, css
“::before” vs “:before” (chr/css)113
css, comparisons, support
Solved With CSS! Logical Styling Based on the Number of Given Elements (una/css)112
css
BEM for Beginners: Why You Need BEM (sma)111
bem, css
Selectors Level 4 (fan+/w3c)110
css, standards
“Stop Using CSS Selectors for Non-CSS” (chr/css)109
css, html, javascript, jquery
Performance of CSS Selectors Is Still Irrelevant (j9t)108
performance, css
Upgrade Your Project With CSS Selector and Custom Attributes107
css, testing, selenium
CSS: The Reason Why Selectors Should Be Ordered, Too (j9t)106
css, sorting
Some Extremely Handy “:nth-child” Recipes as Sass Mixins (css)105
css, sass, mixins, examples
CSS Tip: Use “:not” to Save Time and Lines of Code (sas)104
css, tips-and-tricks
CSS Selectors: Specificity (web)103
css, cascade
CSS Selectors: Pseudo-Elements (web)102
css
CSS Selectors: Attribute Selectors (web)101
css, attributes
CSS Selectors: Combinators (web)100
css
Style List Markers in CSS (chr/css)99
css, lists
Spoooooky CSS Selectors (chr/css)98
css, examples
Using CSS Mod Queries With Range Selectors (ali)97
css
You Can Kinda Invent Your Own Weird Design Language With Attributes and Attribute Selectors (chr/css)96
html, css, attributes, naming
Precedence in CSS (When Order of CSS Matters) (chr/css)95
css, cascade
An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (sma)94
guides, css, examples
On “:not” and Specificity (ire)93
css, cascade
CSS Specificity Is Base-Infinite (chr/css)92
css, cascade
Constructing CSS Quantity Queries on the Fly (rea/sma)91
css
Quantity Ordering With CSS (rea/sma)90
css, flexbox, layout
12 Little-Known CSS Facts (the Sequel) (lou)89
css, borders, typography, tables, naming, animations
The Future Generation of CSS Selectors: Level 4 (lou)88
css, examples
Extending in Sass Without Creating a Mess (sma)87
sass, css, extensibility
Selector Specificity With CSS Preprocessors86
css, cascade, preprocessors, bem, sass
Strategies for Keeping CSS Specificity Low (chr/css)85
css, cascade, strategies
Specificity Graphs (jus)84
css, cascade, visualization
The Specificity Graph (css)83
css, cascade, visualization
Axiomatic CSS and Lobotomized Owls (hey/ali)82
css
HTML5 Forms: CSS (cra)81
html, forms, css, cascade
Universal Selector (CSS Selector)80
css
CSS Selectors Cheat Sheet79
css, cheat-sheets, examples
“:first-child” (CSS Selector)78
css
The Current Generation of CSS3 Selectors (lou)77
css, examples
Semantic CSS With Intelligent Selectors (hey/sma)76
css, semantics, html
Selecting HTML5 “id” and “class” Names That Start With a Number in CSS (ben)75
html, attributes, css
How to Order CSS Selectors (j9t)74
how-tos, css, sorting, conventions
CSS Selectors Level 4: The Path to CSS473
css
Sneak Peek Into the Future: CSS Selectors, Level 4 (sma)72
css
Pseudo Element Animations/Transitions Bug Fixed in WebKit (chr/css)71
webkit, browser-engines, browsers, css, animations, transitions, bugs
Getting to Know CSS3 Selectors: Structural Pseudo-Classes70
css, examples
Classes vs. IDs and Descendent Selectors69
css, comparisons
In Defense of Descendant Selectors and ID Elements (zel)68
css, html
Off Canvas Menu With CSS “:target” (chr/css)67
css, navigation
CSS “:target” for Off-Screen Designs (css)66
css, transitions, navigation, mobile
Learning to Love the Boring Bits of CSS (sto/ali)65
css, units, functions
Using the CSS “:target” Selector (chr/css)64
css, jquery
How to Put Your CSS3 on “:target” (cra)63
css
Multiple Attribute Values (chr/css)62
html, attributes, css
5 Tips for More Efficient jQuery Selectors (cra)61
jquery, tips-and-tricks
Discover What’s New in CSS 4 (wir)60
css
Do You Use These 7 Attribute Selectors in Your CSS?59
css
“var” Selector58
javascript, css
Why Can’t We Trigger CSS3 Animations Using “:hover” and “:focus”? (mat)57
css, animations
Little CSS Stuff Newcomers Get Confused About (chr/css)56
css, cascade, fundamentals
Don’t Use IDs in CSS Selectors?55
css, cascade, performance
Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (lou/sma)54
css, generated-content, examples
Useful “:nth-child” Recipes (chr/css)53
css, examples
Better Semantics With CSS Combinators and Selectors52
css
The Difference Between “:nth-child” and “:nth-of-type” (chr/css)51
css, comparisons
How to Use CSS3 Pseudo-Classes (sma)50
how-tos, css, examples
Top 50 jQuery Selectors49
jquery
Styling Texty Inputs Only (chr/css)48
css, forms
Why Use Classes or IDs on the HTML Element? (chr/css)47
html, attributes, css, wordpress, modernizr
Why We Don’t Have a Parent Selector (jus)46
css, performance
Efficiently Rendering CSS (chr/css)45
css, performance, rendering
Adding Content Using CSS3 (the)44
css, generated-content
CSS Specificity and Inheritance (sma)43
css, cascade, inheritance
Meet the Pseudo Class Selectors (chr/css)42
css
The Skinny on CSS Attribute Selectors (chr/css)41
css, attributes, html
How “nth-child” Works (chr/css)40
css
Zen Coding: Generating HTML From Selectors (dal/aja)39
tooling, css, html
Taming Advanced CSS Selectors (sma)38
css, examples
Simplifying CSS Selectors37
css, performance
How to Override Inline CSS Styles (cra)36
how-tos, css, cascade
Performance of CSS Selectors Is Irrelevant (j9t)35
performance, css
Is Optimizing CSS Selectors Worth It? (dal/aja)34
css, optimization, performance
Performance Impact of CSS Selectors33
performance, css, metrics
Specifics on CSS Specificity (chr/css)32
css, cascade
The Two CSS Selector Bugs in IE6 (pau)31
css, bugs, browsers, internet-explorer
Regex Matching Attribute Selectors (sib)30
css, attributes, regex
The Difference Between ID and Class (chr/css)29
html, attributes, css
CSS General Sibling Combinator in Action (dal/aja)28
css
CSS: Simple Rules for Better Organization and More Efficiency (j9t)27
css, guidelines, sorting
CSS Qualified Selectors (sha)26
css
Phantom CSS (tka)25
css
Tomorrow’s CSS Today: 8 Techniques They Don’t Want You to Know24
css, borders, techniques, progressive-enhancement
Just How Useful Are CSS3 Selectors? (pet)23
css
CSS: Selector Variables (j9t)22
css, variables
Getting Specific With CSS (tka)21
css, cascade
The Great Specificity Swindle (ate)20
css, cascade
MRI: CSS Selector In-Page Tester (dal/aja)19
bookmarklets, css, testing
CSS Specificity: Things You Should Know (sma)18
css, cascade, examples
CSS Selectors—Speed Myths17
css, performance, metrics, extjs, jquery, dojo, mootools, prototypejs, internet-explorer, firefox, safari, opera, browsers, comparisons, myths
Who Ordered the Link States? (mey)16
css, links
Using CSS3 Selectors to Highlight Hyperlinks (pet)15
css, links
Top CSS Tips (jus)14
css, units, tips-and-tricks
CSS: Use Type Selectors13
css
By Logical Extension (bee)12
css, performance
“:focus” and “:not”11
css
Cool Use for CSS Attribute Selectors (and)10
css, attributes
CSS 3 Selectors9
css, fundamentals, examples
Fun With Links (sim)8
links, css
The Anatomy of a Stylesheet (sim)7
css, concepts
Index DOT CSS: The Advanced CSS Reference6
css, support, browsers, overviews
CSS Specificity Calculator (pol)5
tools, exploration, auditing, debugging, css, cascade
CSS Specificity Visualizer (ise)4
tools, exploration, auditing, debugging, css, cascade, visualization
CSS Quantity Query Generator3
tools, exploration, code-generation, css
CSS “:nth” Tester (css)2
tools, exploration, auditing, debugging, css
CSS Selector Parser (lea)1
tools, exploration, auditing, debugging, css