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” RSS feed (per email)

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