Frontend Dogma

“selectors” Archive

(Need an explanation? Look for “selectors” at WebGlossary.info.)

  1. Making Content-Aware Components Using CSS “:has()”, Grid, and Quantity Queries (by/via) · · , ,
  2. CSS “only-child” Instead of Conditional Logic (by) · · ,
  3. I Wasted a Day on CSS Selector Performance to Make a Website Load 2 ms Faster (by) · · ,
  4. Selecting Previous Siblings (by/via) · ·
  5. Time Travelling CSS With “:target” (via) · ·
  6. The Undeniable Utility of CSS “:has” (by) · · ,
  7. Double Your Specificity With This One Weird Trick (by) · · , ,
  8. The “of S” Syntax in “:nth-child()” (by) · ·
  9. Wait, What’s the Difference Between “:host”, “:host()”, and “:host-context()”?! (by) · · ,
  10. Thoughts on CSS in 2024 (by) · · , , ,
  11. CSS Selectors (by/via) · · ,
  12. Analyze CSS Selector Performance During Recalculate Style Events (via) · · , , , , ,
  13. Display the Specificity of a CSS Selector (by/via) · · , , , , , , , , , , ,
  14. CSS Specificity for WordPress 6.6 (by/via) · · , , ,
  15. CSS “:has()”, the God Selector (by) · ·
  16. A Brief Note on Highlighted Text (by) · · , , ,
  17. Misconceptions About CSS Specificity (by/via) · · ,
  18. Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling (by/via) · · , ,
  19. Use “:has()” to Scope CSS · · ,
  20. A Primer on the Cascade and Specificity (by/via) · · , ,
  21. Managing User Focus With “:focus-visible” (by/via) · · ,
  22. The Power of “:has()” in CSS (by/via) · ·
  23. New CSS That Can Actually Be Used in 2024 (by) · · , , , , , ,
  24. Accessible Forms With Pseudo Classes (by/via) · · , ,
  25. Some Little Ways I’m Using CSS “:has()” in the Real World (by/via) · · ,
  26. Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes (by/via) · · ,
  27. CSS “:has()” Interactive Guide (by) · · ,
  28. CSS “::backdrop” Now Inherits From Its Originating Element (by/via) · ·
  29. Using Recursive CSS to Change Styles Based on Depth (by) · ·
  30. Big, Beautiful, Beefy Focus States With “:focus-visible” (by) · · ,
  31. Difference Between “getElementByID” and “querySelector” (by) · · ,
  32. Combining “:has” and “:only-child” to Change Tab Containers (by) · ·
  33. Locking Scroll With “:has()” (by) · · ,
  34. We Can :has It All (by) · · , ,
  35. Quantity Queries Are Very Easy With CSS “:has()” (by/via) · ·
  36. Browsers Only Update “:target” on Page Load and During Fragment Navigation (by/via) · ·
  37. Surprising Facts About New CSS Selectors (by/via) · ·
  38. Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls (by/via) · · ,
  39. “:fullscreen” Demo Without JavaScript (by) · ·
  40. Prodding Firefox to Update “:has()” Selection (by) · · , , ,
  41. Styling External Links With Attribute Selectors (by/via) · · ,
  42. Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule (by/via) · · , ,
  43. How to Escape CSS Selectors in JavaScript (by) · · , , ,
  44. CSS Lobotomized Owl Selector: A Modern Guide (by/via) · · , ,
  45. Combining “:placeholder-shown” and “:has” (by) · · ,
  46. CSS Selectors: A Visual Guide (by) · · ,
  47. Faking a “:snapped” Selector With Scroll-Driven Animations (by/via) · · , ,
  48. What Exactly Is [the] “:root” Pseudo-Element in CSS? (by/via) · · ,
  49. Using Multiple Selectors With JavaScript Selector Methods (by) · ·
  50. Style Recalculation Secrets They Don’t Want You to Know (by/via) · · , ,
  51. How Blink Invalidates Styles When “:has()” [Is] in Use (by/via) · · , , , ,
  52. Stop Rewriting Your CSS! Use “:not()” Instead (by/via) · · , ,
  53. Conditional CSS With “:has” and “:nth-last-child” (by) · ·
  54. How “:not()” Chains Multiple Selectors (by/via) · ·
  55. An Introduction to the “:has()” Selector in CSS (by/via) · · ,
  56. Exploring “:has()” Again (by/via) · ·
  57. CSS: Tricks for Targeting Elements With CSS (by) · · ,
  58. A CSS Selector to Highlight Clickable Elements (by) · ·
  59. When Is “:focus-visible” Visible? (by) · · ,
  60. DevTools: Faster Searching in DevTools With CSS Selectors (by) · · , , , ,
  61. Selecting Previous Siblings With CSS “:has()” (by) · ·
  62. Use the Child-Element Count in CSS (by) · ·
  63. “(255,255,255)” Is the Highest Specificity (by/via) · · ,
  64. Create a Rainbow-Coloured List With “:nth-of-type()” (by) · · ,
  65. More Control Over “:nth-child()” Selections With the “of S” Syntax (by/via) · ·
  66. A “nth-child” CSS Trick (by) · · ,
  67. Level Up Your CSS Skills With the “:has()” Selector (by/via) · ·
  68. More Real-World Uses for “:has()” (via) · ·
  69. Solved With “:has()”: Vertical Spacing in Long-Form Text (via) · ·
  70. Using “:is()” in Complex Selectors Selects More Than You Might Initially Think (by/via) · ·
  71. The Truth About CSS Selector Performance (by/via) · · ,
  72. Sibling Scopes in CSS, Thanks to “:has()” (by/via) · ·
  73. “:has” Is an Unforgiving Selector (by/via) · ·
  74. CSS “:readonly” Is Not for Select Fields (by) · ·
  75. CSS “:empty” Isn’t Applicable on Form Fields (by) · · ,
  76. CSS “:has()” Feature Detection With “@ supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” (by/via) · · , ,
  77. Styling a “pre” That Contains a “code” (by) · ·
  78. 4 Ways CSS “:has()” Can Make Your HTML Forms Even Better (by) · · , ,
  79. A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” (by/via) · · ,
  80. Testing for the Support of a Selector (by) · · ,
  81. “:has(:not())” vs. “:not(:has())” (by) · · ,
  82. CSS “:is()”, “:where()”, “:has()”, and “:not()” · ·
  83. Taming the Cascade With BEM and Modern CSS Selectors (via) · · , , ,
  84. Style a Parent Element Based on Its Number of Children Using CSS “:has()” (by/via) · ·
  85. CSS “:where()” “:is()” the Difference? (by) · ·
  86. CSS Specificity for Beginners (by) · · ,
  87. The Wasted Potential of CSS Attribute Selectors (by) · · ,
  88. A Pure CSS Gallery Focus Effect With “:not” (via) · ·
  89. :where :is CSS? (by) · ·
  90. “:has()” Opens Up New Possibilities With CSS (by) · · ,
  91. I Never Thought This Would Be Possible With CSS (by) · · ,
  92. Detecting CSS Selector Support (by/via) · · , ,
  93. Is It “:modal”? (by/via) · · ,
  94. Parents Counting Children in CSS (by) · ·
  95. Using “:has()” as a CSS Parent Selector and Much More (by/via) · ·
  96. How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work (by/via) · ·
  97. Modern CSS Selectors (by/via) · ·
  98. “:has()”: The Family Selector (by/via) · ·
  99. The Advanced Guide to the CSS “:has()” Selector (via) · · ,
  100. Detecting CSS Selector Support With JavaScript (by) · · , ,
  101. Solving the “Dangler” Conundrum With Container Queries and “:has()” (by) · ·
  102. Understanding CSS “:has()” (by/via) · · ,
  103. With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (by) · · , , ,
  104. The Unlocked Possibilities of the “:has()” Selector (by) · ·
  105. A Previous Sibling Selector (by) · ·
  106. Managing Specificity With CSS Cascade Layers (by/via) · · , ,
  107. Style Scoping Versus Shadow DOM: Which Is Fastest? (by) · · , , , , ,
  108. How and When to Use the CSS “:has” Selector (by/via) · ·
  109. Conditionally Styling Selected Elements in a Grid Container (by/via) · · ,
  110. Complex vs. Compound Selectors (by) · · ,
  111. Fun With CSS Combinators (by) · ·
  112. :where() :is() :has()? New CSS Selectors That Make Your Life Easier (by/via) · ·
  113. Master the “:nth-child()” Pseudo-Class (by/via) · · ,
  114. Practical Use Cases for “:has()” Pseudo-Class (by/via) · · ,
  115. Intro to CSS Parent Selector—“:has()” (by/via) · · , ,
  116. CSS Parent Selector (by) · ·
  117. CSS “:has()” a Parent Selector Now (by) · ·
  118. Animated Grid Tracks With “:has()” (by/via) · · , ,
  119. How to Match HTML Elements With an Indeterminate State (by) · · , ,
  120. CSS “:has” (by) · ·
  121. Deep Dive Into the CSS “:where()” Function (by/via) · · ,
  122. The Focus-Indicated Pseudo-Class “:focus-visible” (by/via) · · ,
  123. Here’s What I Didn’t Know About “:where()” (by) · ·
  124. Comparing CSS Specificity Values (by) · · ,
  125. The CSS “:has()” Pseudo-Class, aka Parent Selector (by) · ·
  126. The CSS “:has()” Selector Is Way More Than a “Parent Selector” (by/via) · ·
  127. “@ supports selector()” (by/via) · · , ,
  128. Native CSS Nesting: What You Need to Know (by/via) · · ,
  129. 7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS (by/via) · ·
  130. Simpler Block Spacing in WordPress With “:is()” and “:where()” (by/via) · · ,
  131. Reducing the Need for Pseudo-Elements (by/via) · ·
  132. Next-Level List Bullets With CSS “::marker” (by/via) · ·
  133. CSS Nesting, Specificity, and You (by) · · , ,
  134. Can I “:has()” (by) · ·
  135. Custom Attributes Are Fast Good and Cheap (by) · ·
  136. A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (by/via) · · , ,
  137. You Want Enabling CSS Selectors, Not Disabling Ones (by) · ·
  138. Performance of CSS Selectors Is Still Irrelevant (by) · · ,
  139. Upgrade Your Project With CSS Selector and Custom Attributes (via) · · , ,
  140. CSS: The Reason Why Selectors Should Be Ordered, Too (by) · · ,
  141. CSS Selectors: Specificity (by/via) · · ,
  142. CSS Selectors: Pseudo-Elements (by/via) · ·
  143. CSS Selectors: Attribute Selectors (by/via) · ·
  144. CSS Selectors: Combinators (by/via) · ·
  145. Using CSS Mod Queries With Range Selectors (via) · ·
  146. 12 Little-Known CSS Facts (the Sequel) (by/via) · · , , , , ,
  147. The Future Generation of CSS Selectors: Level 4 (by/via) · · ,
  148. Selector Specificity With CSS Preprocessors (by/via) · · , , , ,
  149. Specificity Graphs (by) · · , ,
  150. The Specificity Graph (by) · · , ,
  151. Axiomatic CSS and Lobotomized Owls (by/via) · ·
  152. HTML5 Forms: CSS (by/via) · · , , ,
  153. Universal Selector (CSS Selector) (by/via) · ·
  154. CSS Selectors Cheat Sheet (by/via) · · , ,
  155. “:first-child” (CSS Selector) (by/via) · ·
  156. The Current Generation of CSS3 Selectors (by/via) · · ,
  157. Semantic CSS With Intelligent Selectors (by/via) · · , ,
  158. How to Order CSS Selectors (by) · · , , ,
  159. CSS Selectors Level 4: The Path to CSS4 (by/via) · ·
  160. Sneak Peek Into the Future: CSS Selectors, Level 4 (by/via) · ·
  161. Getting to Know CSS3 Selectors: Structural Pseudo-Classes (by/via) · · ,
  162. Learning to Love the Boring Bits of CSS (by/via) · · , ,
  163. How to Put Your CSS3 on “:target” (by/via) · ·
  164. 5 Tips for More Efficient jQuery Selectors (by/via) · · ,
  165. Learning to Use the “:after” and “:before” Pseudo-Elements in CSS (by/via) · · ,
  166. Better Semantics With CSS Combinators and Selectors (by/via) · ·
  167. How to Use CSS3 Pseudo-Classes (by/via) · · , ,
  168. Top 50 jQuery Selectors (by/via) · ·
  169. Why We Don’t Have a Parent Selector (by) · · ,
  170. CSS Specificity and Inheritance (by/via) · · ,
  171. Taming Advanced CSS Selectors (by/via) · · ,
  172. How to Override Inline CSS Styles (by/via) · · , ,
  173. Performance of CSS Selectors Is Irrelevant (by) · · ,
  174. The Two CSS Selector Bugs in IE6 (by) · · , , ,
  175. Regex Matching Attribute Selectors (by/via) · · ,
  176. CSS: Simple Rules for Better Organization and More Efficiency (by) · · , ,
  177. Tomorrow’s CSS Today: 8 Techniques They Don’t Want You to Know (via) · · , , ,
  178. CSS: Selector Variables (by) · ·
  179. The Great Specificity Swindle (by/via) · · ,
  180. CSS Specificity: Things You Should Know (via) · · , ,
  181. Who Ordered the Link States? (by) · · ,
  182. Top CSS Tips (by) · · , ,
  183. By Logical Extension (by) · · ,
  184. CSS “:nth” Tester (via) · , , , ,
  185. CSS Quantity Query Generator (by) · , , ,
  186. CSS Specificity Visualizer (by) · , , , , , ,
  187. CSS Specificity Calculator (via) · , , , , ,