← Back to release summary

:target-before and :target-after pseudo-classes

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

These pseudo-classes match scroll markers that are, respectively, before or after the active marker (the one matching :target-current) within the same scroll marker group, as determined by flat tree order: * :target-before matches all scroll markers that precede the active marker in the flat tree order within the group. * :target-after matches all scroll markers that follow the active marker in the flat tree order within the group.

Motivation

Being able to select scroll markers before/after the target one allows to e.g. highlight the progress of the scroller by styling the already viewed scroll markers.

Standards & signals

Samples: https://drafts.csswg.org/css-overflow-5/#example-cf830461

View on chromestatus.com