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 Other Related TopicsDate#
Should We Even Have “:closed”? (sun/css)287
css, disclosure-widgets
CSS “:interest-invoker” and “:interest-target” Pseudo-Classes (tre)286
css, forms
My CSS Selector Strategy (mal)285
css, principles
Frontend News #17: Why Pseudo-Elements Don’t Work With “:is()”, the Advantages of OKLCH, and More (zor/css)284
videos, css, oklch
25 New and Rad Features of CSS (arg/cas)283
videos, css, transitions, animations, cascade, functions, colors, scrolling
Top 11 CSS Tricks Every Web Developer Should Know282
css, custom-properties, layout, animations, positioning, dark-mode, resets, tips-and-tricks
CSS :is() :where() the Magic Happens (mat)281
css, cascade
This Website Has No Class (aaa)280
css, web-components
Styling Siblings With CSS Has Never Been Easier: Experimenting With “sibling-count” and “sibling-index” (uti)279
css, functions
Frontend News #16: “:heading” Pseudo-Class, Faded Text Effects, “box-sizing” (zor/css)278
videos, css, box-model, effects, view-transitions
One List to Rule Them All (arg)277
css, functions, units, learning, link-lists
Why Is CSS “::first-letter” Not Working? (whi)276
css
“:has()” Is More Than a Parent Selector (kev)275
videos, css
“:nth-last-child” (kev)274
css
Quantity Query Carousel (chr/fro)273
css, grids, layout
“:out-of-range” (kev)272
css
“:placeholder-shown” (kev)271
css
What Is [the] CSS Owl Selector (“* + *”)? (zor/css)270
videos, css
HTML Oddities: Does the Order of Attribute Values Matter? (ede)269
html, attributes, css
“:only-child” (kev)268
css
Getting Specific About CSS Specificity (kat)267
css, cascade
Making “:visited” More Private (dev)266
css, privacy, chrome, google, browsers
Quick Reminder That “:is()” and “:where()” Are Basically the Same With One Key Difference (geo/css)265
css, cascade
Reducing CSS Complexity With the “:is()” Pseudo-Class (cfe)264
css, complexity
“:in-range” Pseudo-Class (kev)263
css, forms
Future of CSS: “select” Styling Without the Hacks262
css, forms, html
Decoding CSS Selectors: “:has(:not)” vs. “:not(:has)” (pol)261
css, comparisons
CSS-Only Click Handlers You Might Not Be Using, but You Should260
css
The “:not” Selector in Use (cit)259
css
Rainbow Selection in CSS (chr/fro)258
css, effects
Scroll State Queries Are on the Way (and a Bunch More) (kev)257
videos, css, container-queries, functions, scrolling
How to Wait for the “sibling-count()” and “sibling-index()” Functions (mon/css)256
how-tos, css, functions
The “:empty” Pseudo-Class in CSS (cfe)255
css
CSS “::target-text” for Text Highlighting (tre)254
css
CSS Selectors Advent Calendar 2024253
css, examples
CSS Selectors: Unlocking Advanced Selectors for Modern Web Design252
css
Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (eri/pic)251
web-components, css, grids
CSS “only-child” Instead of Conditional Logic250
css, conditionals
I Wasted a Day on CSS Selector Performance to Make a Website Load 2 ms Faster (try)249
css, performance
Selecting Previous Siblings (chr/fro)248
css
The Undeniable Utility of CSS “:has” (jos)247
css, examples
Time Travelling CSS With “:target” (css)246
css
Double Your Specificity With This One Weird Trick (cir)245
css, cascade, tips-and-tricks
The “of S” Syntax in “:nth-child()” (mat)244
css
Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (and)243
web-components, css
CSS Selectors (geo/css)242
css, overviews
Thoughts on CSS in 2024 (j9t)241
css, resets, logical-properties, custom-properties
Analyze CSS Selector Performance During Recalculate Style Events (dev)240
browsers, google, chrome, dev-tools, performance, css
Display the Specificity of a CSS Selector (pat/dev)239
css, cascade, dev-tools, browsers, google, chrome, microsoft, edge, apple, safari, mozilla, firefox
CSS Specificity for WordPress 6.6 (wor)238
discussions, wordpress, css, cascade
CSS “:has()”, the God Selector (bru)237
css
A Brief Note on Highlighted Text (aar)236
accessibility, colors, contrast, css
Misconceptions About CSS Specificity (bra)235
css, cascade
Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling (ami/sma)234
css, html, techniques
Use “:has()” to Scope CSS233
css, scope
A Primer on the Cascade and Specificity (bel/pic)232
introductions, css, cascade
Managing User Focus With “:focus-visible” (css)231
css, focus
The Power of “:has()” in CSS (css)230
css
New CSS That Can Actually Be Used in 2024 (tho)229
css, logical-properties, container-queries, nesting, functions, cascade, grids
Accessible Forms With Pseudo Classes (css)228
accessibility, forms, css
Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic)227
css, examples
Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes (zor/css)226
videos, css
CSS “:has()” Interactive Guide (sha)225
guides, css
CSS “::backdrop” Now Inherits From Its Originating Element (bra)224
css
CSS “:is(.awesome)” (mar/cfe)223
videos, css, techniques
Using Recursive CSS to Change Styles Based on Depth (cri)222
css
Big, Beautiful, Beefy Focus States With “:focus-visible” (dav)221
css, focus
Difference Between “getElementByID” and “querySelector”220
javascript, css
Combining “:has” and “:only-child” to Change Tab Containers (cri)219
css
Locking Scroll With “:has()” (rob)218
css, scrolling
We Can :has It All (hex)217
css, browsers, support
Quantity Queries Are Very Easy With CSS “:has()” (chr/fro)216
css
Browsers Only Update “:target” on Page Load and During Fragment Navigation (sim)215
css
Surprising Facts About New CSS Selectors (spa/clo)214
css
“:fullscreen” Demo Without JavaScript (yoo)213
css
Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (sim)212
css, forms
Prodding Firefox to Update “:has()” Selection (mey)211
css, mozilla, firefox, support
Styling External Links With Attribute Selectors (mic)210
links, css, attributes
Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule (bra/dev)209
css, scope
How to Escape CSS Selectors in JavaScript (ste)208
how-tos, css, javascript, escaping
CSS Lobotomized Owl Selector: A Modern Guide (log)207
css, guides, history
Combining “:placeholder-shown” and “:has” (cri)206
css, forms
CSS Selectors: A Visual Guide205
guides, css
Faking a “:snapped” Selector With Scroll-Driven Animations (bra)204
css, animations, scrolling
What Exactly Is [the] “:root” Pseudo-Element in CSS? (zor/css)203
videos, css
Using Multiple Selectors With JavaScript Selector Methods (cfe)202
javascript, methods
Style Recalculation Secrets They Don’t Want You to Know (pat/css)201
videos, css, performance
How Blink Invalidates Styles When “:has()” [Is] in Use (iga)200
browsers, browser-engines, rendering, blink, css
Stop Rewriting Your CSS! Use “:not()” Instead (zor/css)199
videos, css, maintenance
Conditional CSS With “:has” and “:nth-last-child” (sha)198
css
How “:not()” Chains Multiple Selectors (mdn)197
css
An Introduction to the “:has()” Selector in CSS (5t3)196
introductions, css
Exploring “:has()” Again (mic)195
css
CSS: Tricks for Targeting Elements With CSS194
css, tips-and-tricks
A CSS Selector to Highlight Clickable Elements (seb)193
css
When Is “:focus-visible” Visible? (ire)192
accessibility, css
DevTools: Faster Searching in DevTools With CSS Selectors191
dev-tools, css, browsers, google, chrome
Selecting Previous Siblings With CSS “:has()”190
css
Use the Child-Element Count in CSS (kev)189
css
“(255,255,255)” Is the Highest Specificity (bra)188
css, cascade
Create a Rainbow-Coloured List With “:nth-of-type()” (rac)187
lists, css, colors
More Control Over “:nth-child()” Selections With the “of S” Syntax (bra/dev)186
css
A “nth-child” CSS Trick (kev)185
css, tips-and-tricks
Level Up Your CSS Skills With the “:has()” Selector (5t3/sma)184
css
More Real-World Uses for “:has()” (css)183
css
Solved With “:has()”: Vertical Spacing in Long-Form Text (css)182
css
The Truth About CSS Selector Performance (pat/mic)181
css, performance
Using “:is()” in Complex Selectors Selects More Than You Might Initially Think (bra)180
css
Sibling Scopes in CSS, Thanks to “:has()” (bra)179
css
“:has” Is an Unforgiving Selector (geo/css)178
css
CSS “:empty” Isn’t Applicable on Form Fields (hel)177
css, forms
CSS “:readonly” Is Not for Select Fields (hel)176
css
CSS “:has()” Feature Detection With “@ supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” (bra)175
css, feature-detection
Styling a “pre” That Contains a “code” (mey)174
css
4 Ways CSS “:has()” Can Make Your HTML Forms Even Better (aus)173
css, html, forms
A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” (bra)172
css, polyfills
Testing for the Support of a Selector (mat)171
css, support
“:has(:not())” vs. “:not(:has())” (mat)170
css, comparisons
CSS “:is()”, “:where()”, “:has()”, and “:not()”169
css
Taming the Cascade With BEM and Modern CSS Selectors (css)168
css, cascade, naming, bem
Style a Parent Element Based on Its Number of Children Using CSS “:has()” (bra)167
css
CSS “:where()” “:is()” the Difference? (hel)166
css
CSS Specificity for Beginners (nic)165
css, cascade
The Wasted Potential of CSS Attribute Selectors164
css, attributes, bem
A Pure CSS Gallery Focus Effect With “:not” (css)163
css
:where :is CSS?162
css
CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre)161
css, examples, cheat-sheets
“:has()” Opens Up New Possibilities With CSS (kev)160
videos, css
I Never Thought This Would Be Possible With CSS (kev)159
videos, css
Detecting CSS Selector Support (mic)158
css, support, feature-detection
Is It “:modal”? (jhe/dev)157
css, modals
How Is This Possible With CSS Only?! (kev)156
videos, css, custom-properties, animations
Parents Counting Children in CSS (mat)155
css
Using “:has()” as a CSS Parent Selector and Much More (jen/web)154
css
How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work (cra)153
css
Modern CSS Selectors (cra)152
css
“:has()”: The Family Selector (jhe/dev)151
css
Detecting CSS Selector Support With JavaScript150
css, feature-detection, support
The Advanced Guide to the CSS “:has()” Selector (log)149
guides, css
Solving the “Dangler” Conundrum With Container Queries and “:has()” (dav)148
css
Understanding CSS “:has()” (mey/iga)147
videos, css
With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (hdv)146
css, accessibility, keyboard-navigation, focus
The Unlocked Possibilities of the “:has()” Selector (jim)145
css
A Previous Sibling Selector (jim)144
css
Managing Specificity With CSS Cascade Layers (zor/css)143
videos, css, cascade
Style Scoping Versus Shadow DOM: Which Is Fastest? (nol)142
scope, dom, shadow-dom, performance, comparisons, metrics
How and When to Use the CSS “:has” Selector (log)141
css
Groking “:active”, “:focus”, and “:focus-visible” Pseudo-Classes (thi)140
css, focus
Complex vs. Compound Selectors (mia)139
css, comparisons
Conditionally Styling Selected Elements in a Grid Container (pre/css)138
css, grids
Fun With CSS Combinators (alv)137
css
:where() :is() :has()? New CSS Selectors That Make Your Life Easier (kil/pol)136
css
Master the “:nth-child()” Pseudo-Class (zor/css)135
videos, css
Practical Use Cases for “:has()” Pseudo-Class (zor/css)134
videos, css
Intro to CSS Parent Selector—“:has()” (zor/css)133
videos, introductions, css
CSS Parent Selector (sha)132
css
CSS “:has()” a Parent Selector Now131
css
Animated Grid Tracks With “:has()” (mic)130
css, layout, grids
How to Match HTML Elements With an Indeterminate State (ste)129
how-tos, html, css
CSS “:has” (dav)128
css
Deep Dive Into the CSS “:where()” Function (log)127
css, deep-dives
The Focus-Indicated Pseudo-Class “:focus-visible” (web)126
css, focus
Here’s What I Didn’t Know About “:where()” (mat)125
css
Comparing CSS Specificity Values (kil)124
css, cascade
The CSS “:has()” Pseudo-Class, aka Parent Selector123
css
The CSS “:has()” Selector Is Way More Than a “Parent Selector” (bra)122
css
“@ supports selector()” (chr/css)121
css, support
Native CSS Nesting: What You Need to Know (log)120
css, nesting
7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS (css)119
css, generated-content
Simpler Block Spacing in WordPress With “:is()” and “:where()” (mic)118
wordpress, css
Reducing the Need for Pseudo-Elements (sma)117
css
Next-Level List Bullets With CSS “::marker”116
lists, css
CSS Nesting, Specificity, and You (kil)115
css, cascade, nesting
Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma)114
css
Can I “:has()” (bka)113
css, igalia
Custom Attributes Are Fast Good and Cheap112
attributes, css
A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (5t3/sma)111
guides, css, support
You Want Enabling CSS Selectors, Not Disabling Ones (cit)110
css
Things You Can Do With CSS Today (bel/sma)109
css, masonry, layout, functions, units
Happier HTML5 Form Validation in Vue (chr/css)108
html, forms, validation, css, vuejs
Responsive Styling Using Attribute Selectors (css)107
css, attributes, responsive-design
CSS Functions Guide (eri/css)106
guides, css, functions
Select an Element With a Non-Empty Attribute (chr/css)105
css, custom-data, html
A Use Case for a Parent Selector (chr/css)104
css
CSS “:not()” With Multiple Classes (chr/css)103
css
CSS Selectors in Go102
css, go, parsing, metrics
Styling Based on Scroll Position (chr/css)101
css, scrolling
Splicing HTML’s DNA With CSS Attribute Selectors (sma)100
html, attributes, css
“::before” vs “:before” (chr/css)99
css, comparisons, support
Solved With CSS! Logical Styling Based on the Number of Given Elements (una/css)98
css
BEM for Beginners: Why You Need BEM (sma)97
bem, css
Selectors Level 4 (fan+/w3c)96
css, standards
“Stop Using CSS Selectors for Non-CSS” (chr/css)95
css, html, javascript, jquery
Performance of CSS Selectors Is Still Irrelevant (j9t)94
performance, css
Upgrade Your Project With CSS Selector and Custom Attributes93
css, testing, selenium
CSS: The Reason Why Selectors Should Be Ordered, Too (j9t)92
css, sorting
Some Extremely Handy “:nth-child” Recipes as Sass Mixins (css)91
css, sass, mixins, examples
CSS Tip: Use “:not” to Save Time and Lines of Code (sas)90
css, tips-and-tricks
CSS Selectors: Specificity (web)89
css, cascade
CSS Selectors: Pseudo-Elements (web)88
css
CSS Selectors: Attribute Selectors (web)87
css, attributes
CSS Selectors: Combinators (web)86
css
Style List Markers in CSS (chr/css)85
css, lists
Spoooooky CSS Selectors (chr/css)84
css, examples
Using CSS Mod Queries With Range Selectors (ali)83
css
You Can Kinda Invent Your Own Weird Design Language With Attributes and Attribute Selectors (chr/css)82
html, css, attributes, naming
Precedence in CSS (When Order of CSS Matters) (chr/css)81
css, cascade
An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (sma)80
guides, css, examples
On “:not” and Specificity (ire)79
css, cascade
CSS Specificity Is Base-Infinite (chr/css)78
css, cascade
Constructing CSS Quantity Queries on the Fly (rea/sma)77
css
Quantity Ordering With CSS (rea/sma)76
css, flexbox, layout
12 Little-Known CSS Facts (the Sequel) (lou)75
css, borders, typography, tables, naming, animations
The Future Generation of CSS Selectors: Level 4 (lou)74
css, examples
Extending in Sass Without Creating a Mess (sma)73
sass, css, extensibility
Selector Specificity With CSS Preprocessors72
css, cascade, preprocessors, bem, sass
Strategies for Keeping CSS Specificity Low (chr/css)71
css, cascade, strategies
Specificity Graphs (jus)70
css, cascade, visualization
The Specificity Graph (css)69
css, cascade, visualization
Axiomatic CSS and Lobotomized Owls (hey/ali)68
css
HTML5 Forms: CSS (cra)67
html, forms, css, cascade
Universal Selector (CSS Selector)66
css
CSS Selectors Cheat Sheet65
css, cheat-sheets, examples
“:first-child” (CSS Selector)64
css
The Current Generation of CSS3 Selectors (lou)63
css, examples
Semantic CSS With Intelligent Selectors (hey/sma)62
css, semantics, html
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