Targeting position:sticky elements that are currently in a ‘stuck’ state

by

There is currently no selector that is being proposed for elements that are currently ‘stuck’. The Postioned Layout module where position: sticky is defined does not mention any such selector either.

Feature requests for CSS can be posted to the www-style mailing list. I believe a :stuck pseudo-class makes more sense than a ::stuck pseudo-element, since you’re looking to target the elements themselves while they are in that state. In fact, a :stuck pseudo-class was discussed some time ago; the main complication, it was found, is one that plagues just about any proposed selector that attempts to match based on a rendered or computed style: circular dependencies.

In the case of a :stuck pseudo-class, the simplest case of circularity would occur with the following CSS:

:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }

And there could be many more edge cases that would be difficult to address.

While it’s generally agreed upon that having selectors that match based on certain layout states would be nice, unfortunately major limitations exist that make these non-trivial to implement. I wouldn’t hold my breath for a pure CSS solution to this problem anytime soon.

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. Is there a CSS parent selector?
  3. Fixed position but relative to container
  4. Complex CSS selector for parent of active child [duplicate]
  5. Select every Nth element in CSS
  6. CSS3 selector :first-of-type with class name?
  7. CSS Selector that applies to elements with two classes
  8. Why bottom:0 doesn’t work with position:sticky?
  9. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  10. CSS selector based on element text? [duplicate]
  11. Pure CSS checkbox image replacement
  12. Handling a colon in an element ID in a CSS selector [duplicate]
  13. CSS selector for attribute names based on a wildcard
  14. IE8 :nth-child and :before
  15. CSS selector to select first element of a given class
  16. Can I use variables for selectors?
  17. CSS: styled a checkbox to look like a button, is there a hover?
  18. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  19. CSS Selector for
  20. How can I apply styles to multiple classes at once?
  21. Is it possible to select the last n items with nth-child?
  22. CSS property value from class name
  23. LESS CSS: abusing the & Operator when nesting?
  24. Angular 2: How to style host element of the component?
  25. How do I select an element only when inside another element?
  26. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  27. CSS class repetition to increase specificity
  28. select second child
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment