| Quick Reminder That “:is()” and “:where()” Are Basically the Same With One Key Difference (geo/css) | | 240 |
| css, cascade |
| Reducing CSS Complexity With the “:is()” Pseudo-Class (cfe) | | 239 |
| css, complexity |
| “:in-range” Pseudo-Class (kev) | | 238 |
| css, forms |
| Future of CSS: “select” Styling Without the Hacks (lin) | | 237 |
| css, forms, html |
| CSS-Only Click Handlers You Might Not Be Using, but You Should (pra) | | 236 |
| css |
| Decoding CSS Selectors: “:has(:not)” vs. “:not(:has)” (pol) | | 235 |
| css, comparisons |
| The “:not” Selector in Use (cit) | | 234 |
| css |
| Rainbow Selection in CSS (chr/fro) | | 233 |
| css, effects |
| Scroll State Queries Are on the Way (and a Bunch More) (kev) | | 232 |
| videos, css, container-queries, functions, scrolling |
| How to Wait for the “sibling-count()” and “sibling-index()” Functions (mon/css) | | 231 |
| how-tos, css, functions |
| The “:empty” Pseudo-Class in CSS (cfe) | | 230 |
| css |
| CSS “::target-text” for Text Highlighting (tre) | | 229 |
| css |
| CSS Selectors Advent Calendar 2024 (iam) | | 228 |
| css, examples |
| CSS Selectors: Unlocking Advanced Selectors for Modern Web Design (bat) | | 227 |
| css |
| Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (eri/pic) | | 226 |
| web-components, css, grids |
| CSS “only-child” Instead of Conditional Logic (rfo) | | 225 |
| css, conditionals |
| I Wasted a Day on CSS Selector Performance to Make a Website Load 2 ms Faster (try) | | 224 |
| css, performance |
| Selecting Previous Siblings (chr/fro) | | 223 |
| css |
| Time Travelling CSS With “:target” (css) | | 222 |
| css |
| The Undeniable Utility of CSS “:has” (jos) | | 221 |
| css, examples |
| Double Your Specificity With This One Weird Trick (cir) | | 220 |
| css, cascade, tips-and-tricks |
| The “of S” Syntax in “:nth-child()” (mat) | | 219 |
| css |
| Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (and) | | 218 |
| web-components, css |
| Thoughts on CSS in 2024 (j9t) | | 217 |
| css, resetting, logical-properties, custom-properties |
| CSS Selectors (geo/css) | | 216 |
| css, overviews |
| Display the Specificity of a CSS Selector (pat/dev) | | 215 |
| css, cascade, dev-tools, browsers, google, chrome, microsoft, edge, apple, safari, mozilla, firefox |
| Analyze CSS Selector Performance During Recalculate Style Events (dev) | | 214 |
| browsers, google, chrome, dev-tools, performance, css |
| CSS Specificity for WordPress 6.6 (aar/wor) | | 213 |
| discussions, wordpress, css, cascade |
| CSS “:has()”, the God Selector (bru) | | 212 |
| css |
| A Brief Note on Highlighted Text (aar) | | 211 |
| accessibility, colors, contrast, css |
| Misconceptions About CSS Specificity (bra/bra) | | 210 |
| css, cascade |
| Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling (ami/sma) | | 209 |
| css, html, techniques |
| Use “:has()” to Scope CSS | | 208 |
| css, scope |
| A Primer on the Cascade and Specificity (bel/pic) | | 207 |
| introductions, css, cascade |
| Managing User Focus With “:focus-visible” (sal/css) | | 206 |
| css, focus |
| The Power of “:has()” in CSS (sal/css) | | 205 |
| css |
| New CSS That Can Actually Be Used in 2024 (tho) | | 204 |
| css, logical-properties, container-queries, nesting, functions, cascade, grids |
| Accessible Forms With Pseudo Classes (sal/css) | | 203 |
| accessibility, forms, css |
| Some Little Ways I’m Using CSS “:has()” in the Real World (bel/pic) | | 202 |
| css, examples |
| Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes (zor/css) | | 201 |
| videos, css |
| CSS “:has()” Interactive Guide (sha) | | 200 |
| guides, css |
| CSS “::backdrop” Now Inherits From Its Originating Element (bra/bra) | | 199 |
| css |
| CSS “:is(.awesome)” (mar/cfe) | | 198 |
| videos, css, techniques |
| Using Recursive CSS to Change Styles Based on Depth (cri) | | 197 |
| css |
| Big, Beautiful, Beefy Focus States With “:focus-visible” (dav) | | 196 |
| css, focus |
| Difference Between “getElementByID” and “querySelector” (kir) | | 195 |
| javascript, css |
| Combining “:has” and “:only-child” to Change Tab Containers (cri) | | 194 |
| css |
| Locking Scroll With “:has()” (rob) | | 193 |
| css, scrolling |
| We Can :has It All (hex) | | 192 |
| css, browsers, support |
| Quantity Queries Are Very Easy With CSS “:has()” (chr/fro) | | 191 |
| css |
| Browsers Only Update “:target” on Page Load and During Fragment Navigation (sim/web) | | 190 |
| css |
| Surprising Facts About New CSS Selectors (spa/clo) | | 189 |
| css |
| Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (sim/web) | | 188 |
| css, forms |
| “:fullscreen” Demo Without JavaScript (yoo) | | 187 |
| css |
| Prodding Firefox to Update “:has()” Selection (mey) | | 186 |
| css, mozilla, firefox, support |
| Styling External Links With Attribute Selectors (mic/css) | | 185 |
| links, css, attributes |
| Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule (bra/dev) | | 184 |
| css, scope |
| How to Escape CSS Selectors in JavaScript (ste) | | 183 |
| how-tos, css, javascript, escaping |
| CSS Lobotomized Owl Selector: A Modern Guide (dop/log) | | 182 |
| css, guides, history |
| Combining “:placeholder-shown” and “:has” (cri) | | 181 |
| css, forms |
| CSS Selectors: A Visual Guide (fff) | | 180 |
| guides, css |
| Faking a “:snapped” Selector With Scroll-Driven Animations (bra/bra) | | 179 |
| css, animations, scrolling |
| Using Multiple Selectors With JavaScript Selector Methods (cfe) | | 178 |
| javascript |
| What Exactly Is [the] “:root” Pseudo-Element in CSS? (zor/css) | | 177 |
| videos, css |
| Style Recalculation Secrets They Don’t Want You to Know (pat/css) | | 176 |
| videos, css, performance |
| How Blink Invalidates Styles When “:has()” [Is] in Use (byu/iga) | | 175 |
| browsers, browser-engines, rendering, blink, css |
| Stop Rewriting Your CSS! Use “:not()” Instead (zor/css) | | 174 |
| videos, css, maintenance |
| Conditional CSS With “:has” and “:nth-last-child” (sha) | | 173 |
| css |
| How “:not()” Chains Multiple Selectors (dip/mdn) | | 172 |
| css |
| An Introduction to the “:has()” Selector in CSS (5t3/sit) | | 171 |
| introductions, css |
| Exploring “:has()” Again (mic/css) | | 170 |
| css |
| CSS: Tricks for Targeting Elements With CSS (uma) | | 169 |
| css, tips-and-tricks |
| A CSS Selector to Highlight Clickable Elements (seb) | | 168 |
| css |
| When Is “:focus-visible” Visible? (ire) | | 167 |
| accessibility, css |
| DevTools: Faster Searching in DevTools With CSS Selectors (uma) | | 166 |
| dev-tools, css, browsers, google, chrome |
| Selecting Previous Siblings With CSS “:has()” (tob) | | 165 |
| css |
| Use the Child-Element Count in CSS (kev) | | 164 |
| css |
| “(255,255,255)” Is the Highest Specificity (bra/bra) | | 163 |
| css, cascade |
| Create a Rainbow-Coloured List With “:nth-of-type()” (rac) | | 162 |
| lists, css, colors |
| More Control Over “:nth-child()” Selections With the “of S” Syntax (bra/dev) | | 161 |
| css |
| A “nth-child” CSS Trick (kev) | | 160 |
| css, tips-and-tricks |
| Level Up Your CSS Skills With the “:has()” Selector (5t3/sma) | | 159 |
| css |
| More Real-World Uses for “:has()” (css) | | 158 |
| css |
| Solved With “:has()”: Vertical Spacing in Long-Form Text (css) | | 157 |
| css |
| The Truth About CSS Selector Performance (pat/mse) | | 156 |
| css, performance |
| Using “:is()” in Complex Selectors Selects More Than You Might Initially Think (bra/bra) | | 155 |
| css |
| Sibling Scopes in CSS, Thanks to “:has()” (bra/bra) | | 154 |
| css |
| “:has” Is an Unforgiving Selector (geo/css) | | 153 |
| css |
| CSS “:readonly” Is Not for Select Fields (hel) | | 152 |
| css |
| CSS “:empty” Isn’t Applicable on Form Fields (hel) | | 151 |
| css, forms |
| CSS “:has()” Feature Detection With “@ supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” (bra/bra) | | 150 |
| css, feature-detection |
| Styling a “pre” That Contains a “code” (mey) | | 149 |
| css |
| 4 Ways CSS “:has()” Can Make Your HTML Forms Even Better (aus) | | 148 |
| css, html, forms |
| A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” (bra/bra) | | 147 |
| css, polyfills |
| Testing for the Support of a Selector (mat) | | 146 |
| css, support |
| “:has(:not())” vs. “:not(:has())” (mat) | | 145 |
| css, comparisons |
| CSS “:is()”, “:where()”, “:has()”, and “:not()” | | 144 |
| css |
| Taming the Cascade With BEM and Modern CSS Selectors (css) | | 143 |
| css, cascade, naming, bem |
| Style a Parent Element Based on Its Number of Children Using CSS “:has()” (bra/bra) | | 142 |
| css |
| CSS “:where()” “:is()” the Difference? (hel) | | 141 |
| css |
| CSS Specificity for Beginners | | 140 |
| css, cascade |
| The Wasted Potential of CSS Attribute Selectors (eli) | | 139 |
| css, attributes, bem |
| A Pure CSS Gallery Focus Effect With “:not” (css) | | 138 |
| css |
| :where :is CSS? (the) | | 137 |
| css |
| CSS Selectors—Cheat Sheet for Class, Name, Child Selector List (fre) | | 136 |
| css, examples, cheat-sheets |
| “:has()” Opens Up New Possibilities With CSS (kev) | | 135 |
| videos, css |
| I Never Thought This Would Be Possible With CSS (kev) | | 134 |
| videos, css |
| Detecting CSS Selector Support (mic/css) | | 133 |
| css, support, feature-detection |
| Is It “:modal”? (jhe/dev) | | 132 |
| css, modals |
| How Is This Possible With CSS Only?! (kev) | | 131 |
| videos, css, custom-properties, animations |
| Parents Counting Children in CSS (mat) | | 130 |
| css |
| Using “:has()” as a CSS Parent Selector and Much More (jen/web) | | 129 |
| css |
| How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work (cra/sit) | | 128 |
| css |
| Modern CSS Selectors (cra/ope) | | 127 |
| css |
| “:has()”: The Family Selector (jhe/dev) | | 126 |
| css |
| Detecting CSS Selector Support With JavaScript (mo) | | 125 |
| css, feature-detection, support |
| The Advanced Guide to the CSS “:has()” Selector (log) | | 124 |
| guides, css |
| Solving the “Dangler” Conundrum With Container Queries and “:has()” (dav) | | 123 |
| css |
| Understanding CSS “:has()” (mey/iga) | | 122 |
| videos, css |
| With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (hdv) | | 121 |
| css, accessibility, keyboard-navigation, focus |
| The Unlocked Possibilities of the “:has()” Selector (jim) | | 120 |
| css |
| A Previous Sibling Selector (jim) | | 119 |
| css |
| Managing Specificity With CSS Cascade Layers (zor/css) | | 118 |
| videos, css, cascade |
| Style Scoping Versus Shadow DOM: Which Is Fastest? (nol) | | 117 |
| scope, dom, shadow-dom, performance, comparisons, metrics |
| How and When to Use the CSS “:has” Selector (iba/log) | | 116 |
| css |
| Conditionally Styling Selected Elements in a Grid Container (rps/css) | | 115 |
| css, grids |
| Complex vs. Compound Selectors (mia) | | 114 |
| css, comparisons |
| Fun With CSS Combinators (alv) | | 113 |
| css |
| :where() :is() :has()? New CSS Selectors That Make Your Life Easier (kil/pol) | | 112 |
| css |
| Master the “:nth-child()” Pseudo-Class (zor/css) | | 111 |
| videos, css |
| Practical Use Cases for “:has()” Pseudo-Class (zor/css) | | 110 |
| videos, css |
| Intro to CSS Parent Selector—“:has()” (zor/css) | | 109 |
| videos, introductions, css |
| CSS Parent Selector (sha) | | 108 |
| css |
| CSS “:has()” a Parent Selector Now (mo) | | 107 |
| css |
| Animated Grid Tracks With “:has()” (mic/css) | | 106 |
| css, layout, grids |
| How to Match HTML Elements With an Indeterminate State (ste) | | 105 |
| how-tos, html, css |
| CSS “:has” (dav) | | 104 |
| css |
| Deep Dive Into the CSS “:where()” Function (tim/log) | | 103 |
| css, deep-dives |
| The Focus-Indicated Pseudo-Class “:focus-visible” (reg/web) | | 102 |
| css, focus |
| Here’s What I Didn’t Know About “:where()” (mat) | | 101 |
| css |
| Comparing CSS Specificity Values (kil) | | 100 |
| css, cascade |
| The CSS “:has()” Pseudo-Class, aka Parent Selector (foo) | | 99 |
| css |
| The CSS “:has()” Selector Is Way More Than a “Parent Selector” (bra/bra) | | 98 |
| css |
| “@ supports selector()” (chr/css) | | 97 |
| css, support |
| Native CSS Nesting: What You Need to Know (sar/log) | | 96 |
| css, nesting |
| 7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS (zii/css) | | 95 |
| css, generated-content |
| Simpler Block Spacing in WordPress With “:is()” and “:where()” (mic/css) | | 94 |
| wordpress, css |
| Reducing the Need for Pseudo-Elements (dis/sma) | | 93 |
| css |
| Next-Level List Bullets With CSS “::marker” (adi/env) | | 92 |
| lists, css |
| CSS Nesting, Specificity, and You (kil) | | 91 |
| css, cascade, nesting |
| Meet “:has”, a Native CSS Parent Selector (and More) (cod/sma) | | 90 |
| css |
| Can I “:has()” (bka) | | 89 |
| css, igalia |
| Custom Attributes Are Fast Good and Cheap (dfk) | | 88 |
| attributes, css |
| A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (5t3/sma) | | 87 |
| guides, css, support |
| You Want Enabling CSS Selectors, Not Disabling Ones (cit) | | 86 |
| css |
| Things You Can Do With CSS Today (bel/sma) | | 85 |
| css, masonry, layout, functions, units |
| CSS Selectors in Go | | 84 |
| css, go, parsing, metrics |
| Splicing HTML’s DNA With CSS Attribute Selectors (sto/sma) | | 83 |
| html, attributes, css |
| BEM for Beginners: Why You Need BEM (inn/sma) | | 82 |
| bem, css |
| Selectors Level 4 (fan+/w3c) | | 81 |
| css, standards |
| Performance of CSS Selectors Is Still Irrelevant (j9t) | | 80 |
| performance, css |
| Upgrade Your Project With CSS Selector and Custom Attributes (sit) | | 79 |
| css, testing, selenium |
| CSS: The Reason Why Selectors Should Be Ordered, Too (j9t) | | 78 |
| css, sorting |
| CSS Tip: Use “:not” to Save Time and Lines of Code (sas) | | 77 |
| css, tips-and-tricks |
| CSS Selectors: Specificity (web/sit) | | 76 |
| css, cascade |
| CSS Selectors: Pseudo-Elements (web/sit) | | 75 |
| css |
| CSS Selectors: Attribute Selectors (web/sit) | | 74 |
| css, attributes |
| CSS Selectors: Combinators (web/sit) | | 73 |
| css |
| Using CSS Mod Queries With Range Selectors (ali) | | 72 |
| css |
| An Ultimate Guide to CSS Pseudo Classes and Pseudo Elements (ric/sma) | | 71 |
| guides, css, examples |
| On “:not” and Specificity (ire) | | 70 |
| css, cascade |
| Constructing CSS Quantity Queries on the Fly (rea/sma) | | 69 |
| css |
| Quantity Ordering With CSS (rea/sma) | | 68 |
| css, flexbox, layout |
| 12 Little-Known CSS Facts (the Sequel) (lou/sit) | | 67 |
| css, borders, typography, tables, naming, animations |
| The Future Generation of CSS Selectors: Level 4 (lou/sit) | | 66 |
| css, examples |
| Extending in Sass Without Creating a Mess (dav/sma) | | 65 |
| sass, css, extensibility |
| Selector Specificity With CSS Preprocessors (fut/sit) | | 64 |
| css, cascade, preprocessors, bem, sass |
| Specificity Graphs (jus) | | 63 |
| css, cascade, visualization |
| The Specificity Graph (css) | | 62 |
| css, cascade, visualization |
| Axiomatic CSS and Lobotomized Owls (hey/ali) | | 61 |
| css |
| HTML5 Forms: CSS (cra/sit) | | 60 |
| html, forms, css, cascade |
| Universal Selector (CSS Selector) (ada/sit) | | 59 |
| css |
| CSS Selectors Cheat Sheet (ada/sit) | | 58 |
| css, cheat-sheets, examples |
| “:first-child” (CSS Selector) (ada/sit) | | 57 |
| css |
| The Current Generation of CSS3 Selectors (lou/sit) | | 56 |
| css, examples |
| Semantic CSS With Intelligent Selectors (hey/sma) | | 55 |
| css, semantics, html |
| How to Order CSS Selectors (j9t) | | 54 |
| how-tos, css, sorting, conventions |
| CSS Selectors Level 4: The Path to CSS4 (faz/sit) | | 53 |
| css |
| Sneak Peek Into the Future: CSS Selectors, Level 4 (end/sma) | | 52 |
| css |
| Pseudo Element Animations/Transitions Bug Fixed in WebKit (chr/css) | | 51 |
| webkit, browser-engines, browsers, css, animations, transitions |
| Getting to Know CSS3 Selectors: Structural Pseudo-Classes (emi/sit) | | 50 |
| css, examples |
| Off Canvas Menu With CSS “:target” (chr/css) | | 49 |
| css, navigation |
| CSS “:target” for Off-Screen Designs (cmr/css) | | 48 |
| css, transitions, navigation, mobile |
| Learning to Love the Boring Bits of CSS (sto/ali) | | 47 |
| css, units, functions |
| Using the CSS “:target” Selector (chr/css) | | 46 |
| css, jquery |
| How to Put Your CSS3 on “:target” (cra/sit) | | 45 |
| css |
| Multiple Attribute Values (chr/css) | | 44 |
| html, attributes, css |
| 5 Tips for More Efficient jQuery Selectors (cra/sit) | | 43 |
| jquery, tips-and-tricks |
| Discover What’s New in CSS 4 (wir) | | 42 |
| css |
| Little CSS Stuff Newcomers Get Confused About (chr/css) | | 41 |
| css, cascade, fundamentals |
| Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (lou/sma) | | 40 |
| css, generated-content, examples |
| Useful “:nth-child” Recipes (chr/css) | | 39 |
| css, examples |
| Better Semantics With CSS Combinators and Selectors (chr/sit) | | 38 |
| css |
| The Difference Between “:nth-child” and “:nth-of-type” (chr/css) | | 37 |
| css, comparisons |
| How to Use CSS3 Pseudo-Classes (ric/sma) | | 36 |
| how-tos, css, examples |
| Top 50 jQuery Selectors (sam/sit) | | 35 |
| jquery |
| Styling Texty Inputs Only (chr/css) | | 34 |
| css, forms |
| Why Use Classes or IDs on the HTML Element? (chr/css) | | 33 |
| html, attributes, css, wordpress |
| Why We Don’t Have a Parent Selector (jus) | | 32 |
| css, performance |
| Efficiently Rendering CSS (chr/css) | | 31 |
| css, performance, rendering |
| Adding Content Using CSS3 (the) | | 30 |
| css, generated-content |
| CSS Specificity and Inheritance (yai/sma) | | 29 |
| css, cascade |
| Meet the Pseudo Class Selectors (chr/css) | | 28 |
| css |
| The Skinny on CSS Attribute Selectors (chr/css) | | 27 |
| css, attributes, html |
| How “nth-child” Works (chr/css) | | 26 |
| css |
| Taming Advanced CSS Selectors (yai/sma) | | 25 |
| css, examples |
| Simplifying CSS Selectors (sou) | | 24 |
| css, performance |
| How to Override Inline CSS Styles (cra/sit) | | 23 |
| how-tos, css, cascade |
| Performance of CSS Selectors Is Irrelevant (j9t) | | 22 |
| performance, css |
| Performance Impact of CSS Selectors (sou) | | 21 |
| performance, css, metrics |
| Specifics on CSS Specificity (chr/css) | | 20 |
| css, cascade |
| The Two CSS Selector Bugs in IE6 (pau) | | 19 |
| css, browsers, microsoft, internet-explorer |
| Regex Matching Attribute Selectors (sib/sit) | | 18 |
| css, attributes, regex |
| The Difference Between ID and Class (chr/css) | | 17 |
| html, attributes, css |
| CSS: Simple Rules for Better Organization and More Efficiency (j9t) | | 16 |
| css, guidelines, sorting |
| CSS Qualified Selectors (sha) | | 15 |
| css |
| Phantom CSS (tka) | | 14 |
| css |
| Tomorrow’s CSS Today: 8 Techniques They Don’t Want You to Know (sit) | | 13 |
| css, borders, techniques, progressive-enhancement |
| CSS: Selector Variables (j9t) | | 12 |
| css, variables |
| Getting Specific With CSS (tka) | | 11 |
| css, cascade |
| The Great Specificity Swindle (ate/sit) | | 10 |
| css, cascade |
| CSS Specificity: Things You Should Know (sma) | | 9 |
| css, cascade, examples |
| Who Ordered the Link States? (mey) | | 8 |
| css, links |
| Top CSS Tips (jus) | | 7 |
| css, units, tips-and-tricks |
| By Logical Extension (bee) | | 6 |
| css, performance |
| CSS Selector Parser (lea) | | 5 |
| tools, exploration, auditing, debugging, css |
| CSS “:nth” Tester (css) | | 4 |
| tools, exploration, auditing, debugging, css |
| CSS Quantity Query Generator (dre) | | 3 |
| tools, exploration, code-generation, css |
| CSS Specificity Visualizer (ise) | | 2 |
| tools, exploration, auditing, debugging, css, cascade, visualization |
| CSS Specificity Calculator (pol) | | 1 |
| tools, exploration, auditing, debugging, css, cascade |
