285114 2024-12-23 14:57:06 -0800 Subsequent nested styles ignored after incorrect nested selector 2025-03-28 09:44:17 -0700 1 1 1 Unclassified WebKit CSS Safari 17 Mac (Intel) macOS 14 RESOLVED FIXED https://github.com/web-platform-tests/wpt/pull/50310 https://bugs.webkit.org/show_bug.cgi?id=290584 https://codepen.io/alvaromontoro/pen/emORgey InRadar P2 Minor --- 1 alvaromontoro m_dubet alvaromontoro karlcow koivisto lx2798 m_dubet vincent.emonet webkit-bug-importer oldest_to_newest 2083703 0 alvaromontoro 2024-12-23 14:57:06 -0800 In CSS Nesting, if an "erroneous" selector is included, the following rules will be ignored and not applied. This behavior happens on Safari, but it is not the same on Chrome or Firefox. For example (you can find a running demo on this CodePen https://codepen.io/alvaromontoro/pen/emORgey): if we have the following code: ```html <div> Hello <span>World</span>! </div> <style> div { color: blue; span { color: red; } /* this is an incorrect selector because the brackets are empty */ error[] { color: yellow; } span { color: green; } } </style> ``` The word "World" will be green on Chrome and Firefox, but red on Safari. That happens because the styles after the incorrect selector are not processed by Safari, providing a different experience to other browsers. ----- I ran into this issue while styling a custom input range. There is no fully standard way of doing this, so I had to use special vendor-prefixed pseudo-classes. My code was organized by feature, first the styles for the track, then the styles for the thumb: ```css .range { /* track styles */ &::-webkit-slider-runnable-track { ... } &::-moz-range-track { ... } /* thumb styles */ &::-webkit-slider-thumb { ... } &::-moz-range-thumb { ... } } ``` When I did that, the thumb styles were not applied correctly on Safari (while they worked just fine on other browsers). I solved it by rearranging the code by vendor prefixes instead of by feature: ```css .range { /* Chrome + Safari */ &::-webkit-slider-runnable-track { ... } &::-webkit-slider-thumb { ... } /* Firefox */ &::-moz-range-track { ... } &::-moz-range-thumb { ... } } ``` Another option that worked was removing the nesting. But, ideally, it should not matter which order these styles were nested in as they are mutually exclusive. It would be better if WebKit/Safari ignored the incorrect nested selector, then kept processing the remaining ones. 2083712 1 karlcow 2024-12-23 16:14:01 -0800 Confirmed. I tried also with `err/or {color: yellow;}` to make sure it was not an artefact of `error[]` ``` FAIL Safari Technology Preview 209 20621.1.6 PASS Firefox Nightly 135.0a1 13524.12.18 PASS Google Chrome Canary 133.0.6914.0 6914.0 ``` 2084290 2 webkit-bug-importer 2024-12-30 14:58:13 -0800 <rdar://problem/142187930> 2088855 3 m_dubet 2025-01-21 17:00:23 -0800 Pull request: https://github.com/WebKit/WebKit/pull/39356 2088999 4 m_dubet 2025-01-22 08:32:08 -0800 *** Bug 284746 has been marked as a duplicate of this bug. *** 2089977 5 ews-feeder 2025-01-27 09:11:44 -0800 Committed 289429@main (ae311f82a32c): <https://commits.webkit.org/289429@main> Reviewed commits have been landed. Closing PR #39356 and removing active labels. 2106837 6 m_dubet 2025-03-28 09:44:17 -0700 *** Bug 290584 has been marked as a duplicate of this bug. ***