Skip to content

[css-cascade-6] Proposal: "until" pseudo selector #8815

Closed
@yairEO

Description

@yairEO

Following my StackOverflow question


I would like to propose a pseudo-selector for selecting elements until the selector defined in the :until part is encountered.

The main purpose is a repeating selector, for confined "groups" of matched elements, between certain constraints.

Use-cases for an :until pseudo-selector:

For each div with class active select all of its following (next) <a> siblings up until the first encountered div selector (jsbin).

(the number of <a> elements is unknown)

div.active ~ a:until(div) { color: red; }
<a></a>       
<a></a>       
<div class='active'></div>
<a></a> <!-- should match this -->
<a></a> <!-- should match this -->
<div></div>
<a></a>
<a></a>
<div class='active'></div>
<a></a> <!-- should match this -->

Currently, there is a specificity problem if one simply write the below CSS selectors:

The selectors only match the first "group" of ` elements and then the second selector overrides the first selector for the rest of the anchor elements:

div.active ~ a { color: red; }
div:not(.active) ~ a { color: initial; }

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Closed as Question AnsweredUsed when the issue is more of a question than a problem, and it's been answered.css-cascade-6

    Type

    No type

    Projects

    Status

    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions