UI Components출처: CSS-Tricks조회수 34
Potentially Coming to a Browser :near() You
By Daniel Schwarz2026년 2월 21일
**Potentially Coming to a Browser :near() You**
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 <length> 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 */ } } Dim elements until :near() To reduce visual clutter, you might want to dim certain components until users are near them...
---
**[devsupporter 해설]**
이 기사는 CSS-Tricks에서 제공하는 최신 개발 동향입니다. 관련 도구나 기술에 대해 더 알아보시려면 원본 링크를 참고하세요.
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 <length> 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 */ } } Dim elements until :near() To reduce visual clutter, you might want to dim certain components until users are near them...
---
**[devsupporter 해설]**
이 기사는 CSS-Tricks에서 제공하는 최신 개발 동향입니다. 관련 도구나 기술에 대해 더 알아보시려면 원본 링크를 참고하세요.