• Just before we wrapped up 2025, I saw this proposal for :near() , a pseudo-class that would match if the pointer were to go near the element. • Well, that would depend on the value of the argument provided. • Thomas Walichiewicz, who proposed :near() , suggests that it works like this: button:near(3rem) { /* Pointer is within 3rem of the button / } For those wondering, yes, we can use the Pythagorean theorem to measure the straight-line distance between two elements using JavaScript (“Euclidean distance” is the mathematical term), so I imagine that that’s what would be used behind the scenes here. • I have some use cases to share with you, but the demos will only be simulating :near() since it’s obviously not supported in any web browser. • Visual effects Without question, :near() could be used for a near-infinite (sorry) number of visual effects: div { / Div is wow / &:near(3rem) { / Div be wowzer / } &:near(1rem) { / Div be woahhhh */ } } :near() Dim elements until To reduce visual clutter, you might want to dim certain components until users are near them. • :near() could be more effective than :hover in this scenario because users could have trouble interacting with the components if they have limited visibility, and so being able to trigger them “earlier” could compensate for that to some degree.

Article Summaries:

  • A recent proposal introduces a new CSS pseudo‑class, :near(), that would match an element when the pointer is within a specified distance (e.g., button:near(3rem)). The selector would calculate Euclidean distance between the cursor and the element, enabling developers to trigger visual effects, dimming, or reveal hidden controls before a hover occurs. The author outlines use cases such as progressive disclosure of buttons and smoother user interactions, while noting accessibility concerns like color contrast and focusability. Currently, no browser implements :near(), so demos rely on simulated behavior. The feature remains a speculative addition to the CSS spec.

Sources: