Re: [csswg-drafts] [selectors-4] need "first-matching-sibling" combinator (#3813)

In many cases, this could be handled by the "nth of" syntax. `:nth-child(1 of .sibling ~ .target)` would select the first child element with class `target` that is also a following sibling of an element with class `sibling`.  (Note, this syntax, with a complex selector in the `of` clause, has been deferred to selectors level 5 in #3760.)

However, that selector would fail if you had more than one `sibling` reference element within the same parent, and you wanted to select the first target element after each.  (e.g., If you have a document that uses headings but no explicit `<section>` elements, and you want to select the first `<p>` paragraph after each heading, skipping over any `<figure>` or `<div>` or other sibling element that might be in between the heading and the paragraph.)

To get the behavior that @v-python wants, the "nth of" counting would need to be applied to each sibling combinator, rather than counting across all children of a parent that also happen to match the any-sibling selector.

Modifying the `~` combinator directly is also likely to be problematic, because it's not clear how much of the right hand side of the combination gets taken into consideration when doing the counting.  E.g., what if `S1 ~2~ S2` is `.sibling ~2~ .target:hover`? Do you only count target elements that are being hovered?

So I'd lean towards extending the `:nth-child(n of selector)` approach to `:nth-sibling(…)`.  The parenthesized expression clearly limits the scope from which you're counting.

But, extending the syntax to sibling relationships isn't straightforward.  The scope of "child" is defined by the DOM tree, but the scope of "sibling" needs to be assessed relative to the previous part of the selector.  We'd need something that's logically more like `:nth(n of .target)-sibling(of .sibling)` (which is awful and not something I'm suggesting. I'm just trying to show the structure — you need to include both the sibling and target selector in the same place you define the counting rule).

Maybe `:nth-sibling(1 of .sibling / .target)` ?


-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3813#issuecomment-480901376 using your GitHub account

Received on Monday, 8 April 2019 16:21:13 UTC