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