Frontend Dogma

“selectors” Archive

  1. A Brief Note on Highlighted Text · · , , ,
  2. Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling · · , ,
  3. Managing User Focus With “:focus-visible” · · ,
  4. The Power of “:has()” in CSS · ·
  5. Accessible Forms With Pseudo Classes · · , ,
  6. Some Little Ways I’m Using CSS “:has()” in the Real World · · ,
  7. Simplify Your CSS Using “:is()” and “:where()” Pseudo-Classes · · ,
  8. CSS “:has()” Interactive Guide · · ,
  9. CSS “::backdrop” Now Inherits from Its Originating Element · ·
  10. Using Recursive CSS to Change Styles Based on Depth · ·
  11. Big, Beautiful, Beefy Focus States With “:focus-visible” · · ,
  12. Difference Between “getElementByID” and “querySelector” · · ,
  13. Combining “:has” and “:only-child” to Change Tab Containers · ·
  14. Locking Scroll With “:has()” · · ,
  15. We Can :has It All · · , ,
  16. Quantity Queries Are Very Easy With CSS “:has()” · ·
  17. Browsers Only Update “:target” on Page Load and During Fragment Navigation · ·
  18. Surprising Facts About New CSS Selectors · ·
  19. “:fullscreen” Demo Without JavaScript · ·
  20. Use the CSS “:disabled” Pseudo-Class Instead of the “[disabled]” Attribute Selector to Match Disabled Form Controls · · ,
  21. Prodding Firefox to Update “:has()” Selection · · , , ,
  22. Styling External Links With Attribute Selectors · · ,
  23. Limit the Reach of Your Selectors With the CSS “@ scope” At-Rule · · ,
  24. How to Escape CSS Selectors in JavaScript · · , , ,
  25. CSS Lobotomized Owl Selector: A Modern Guide · · , ,
  26. Combining “:placeholder-shown” and “:has” · · ,
  27. CSS Selectors: A Visual Guide · · ,
  28. Faking a “:snapped” Selector With Scroll-Driven Animations · · , ,
  29. Using Multiple Selectors With JavaScript Selector Methods · ·
  30. What Exactly Is [the] “:root” Pseudo-Element in CSS? · · ,
  31. Style Recalculation Secrets They Don’t Want You to Know · · , ,
  32. How Blink Invalidates Styles When “:has()” [Is] in Use · · , ,
  33. Stop Rewriting Your CSS! Use “:not()” Instead · · , ,
  34. Conditional CSS With “:has” and “:nth-last-child” · ·
  35. How “:not()” Chains Multiple Selectors · ·
  36. An Introduction to the “:has()” Selector in CSS · · ,
  37. Exploring “:has()” Again · ·
  38. CSS: Tricks for Targeting Elements With CSS · · ,
  39. A CSS Selector to Highlight Clickable Elements · ·
  40. When Is “:focus-visible” Visible? · · ,
  41. DevTools: Faster Searching in DevTools With CSS Selectors · · , , , ,
  42. Selecting Previous Siblings With CSS “:has()” · ·
  43. Use the Child-Element Count in CSS · ·
  44. Create a Rainbow-Coloured List With “:nth-of-type()” · · ,
  45. More Control over “:nth-child()” Selections With the “of S” Syntax · ·
  46. A “nth-child” CSS Trick · · ,
  47. Level Up Your CSS Skills With the “:has()” Selector · ·
  48. More Real-World Uses for “:has()” · ·
  49. Solved With “:has()”: Vertical Spacing in Long-Form Text · ·
  50. Using “:is()” in Complex Selectors Selects More Than You Might Initially Think · ·
  51. The Truth About CSS Selector Performance · · ,
  52. Sibling Scopes in CSS, Thanks to “:has()” · ·
  53. “:has” Is an Unforgiving Selector · ·
  54. CSS “:readonly” Is Not for Select Fields · ·
  55. CSS “:has()” Feature Detection With “@ supports(selector(…))”: You Want “:has(+ *)”, Not “:has(*)” · · ,
  56. Styling a “pre” That Contains a “code” · ·
  57. 4 Ways CSS “:has()” Can Make Your HTML Forms Even Better · · , ,
  58. A “:nth-child(An+B [of S]?)” Polyfill Thanks to CSS “:has()” · · ,
  59. Testing for the Support of a Selector · · ,
  60. “:has(:not())” vs. “:not(:has())” · · ,
  61. CSS “:is()”, “:where()”, “:has()”, and “:not()” · ·
  62. Taming the Cascade With BEM and Modern CSS Selectors · · , , ,
  63. Style a Parent Element Based on Its Number of Children Using CSS “:has()” · ·
  64. CSS “:where()” “:is()” the Difference? · ·
  65. The Wasted Potential of CSS Attribute Selectors · · ,
  66. A Pure CSS Gallery Focus Effect With “:not” · ·
  67. :where :is CSS? · ·
  68. “:has()” Opens Up New Possibilities With CSS · · ,
  69. I Never Thought This Would Be Possible With CSS · · ,
  70. Detecting CSS Selector Support · · , ,
  71. Is It “:modal”? · · ,
  72. Parents Counting Children in CSS · ·
  73. Using “:has()” as a CSS Parent Selector and Much More · ·
  74. How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work · ·
  75. Modern CSS Selectors · ·
  76. “:has()”: The Family Selector · ·
  77. Detecting CSS Selector Support With JavaScript · · , ,
  78. The Advanced Guide to the CSS “:has()” Selector · · ,
  79. Solving the “Dangler” Conundrum With Container Queries and “:has()” · ·
  80. Understanding CSS “:has()” · · ,
  81. With “:focus-visible”, You Can Have Focus Styles When It Makes Sense · · , , ,
  82. The Unlocked Possibilities of the “:has()” Selector · ·
  83. A Previous Sibling Selector · ·
  84. Style Scoping Versus Shadow DOM: Which Is Fastest? · · , , , , ,
  85. How and When to Use the CSS “:has” Selector · ·
  86. Conditionally Styling Selected Elements in a Grid Container · ·
  87. Complex vs. Compound Selectors · · ,
  88. Fun With CSS Combinators · ·
  89. :where() :is() :has()? New CSS Selectors That Make Your Life Easier · ·
  90. Master the “:nth-child()” Pseudo-Class · · ,
  91. Practical Use Cases for “:has()” Pseudo-Class · · ,
  92. Intro to CSS Parent Selector—“:has()” · · , ,
  93. CSS Parent Selector · ·
  94. CSS “:has()” a Parent Selector Now · ·
  95. Animated Grid Tracks With “:has()” · · ,
  96. How to Match HTML Elements With an Indeterminate State · · , ,
  97. CSS “:has” · ·
  98. Deep Dive into the CSS “:where()” Function · ·
  99. The Focus-Indicated Pseudo-Class “:focus-visible” · · ,
  100. Here’s What I Didn’t Know About “:where()” · ·
  101. The CSS “:has()” Pseudo-Class, aka Parent Selector · ·
  102. The CSS “:has()” Selector Is Way More Than a “Parent Selector” · ·
  103. “@ supports selector()” · · ,
  104. Native CSS Nesting: What You Need to Know · · ,
  105. 7 Practical Uses for the “::before” and “::after” Pseudo-Elements in CSS · ·
  106. Simpler Block Spacing in WordPress With “:is()” and “:where()” · · ,
  107. Reducing the Need for Pseudo-Elements · ·
  108. Next-Level List Bullets With CSS “::marker” · ·
  109. Custom Attributes Are Fast Good and Cheap · ·
  110. A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors · · , ,
  111. You Want Enabling CSS Selectors, Not Disabling Ones · ·
  112. CSS Quantity Query Generator · , , ,