Frontend Dogma

“selectors” Archive

Supertopics:  (non-exhaustive) · glossary look-up: “selectors”

Featured on Frontend Dogma? Confirm and whitelist your domain.

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