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