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