UI Components์ถœ์ฒ˜: CSS-Tricks์กฐํšŒ์ˆ˜ 11

Styling ::search-text and Other Highlight-y Pseudo-Elements

By Daniel Schwarz
2026๋…„ 1์›” 29์ผ
**Styling ::search-text and Other Highlight-y Pseudo-Elements**

Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found. By default, ::search-text matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that. Iโ€™ll admit, I hadnโ€™t really been following these highlight pseudo-elements. Up until now, I didnโ€™t even know that there was a name for them, but Iโ€™m glad there is because that makes it easier to round them all up and compare them, which is exactly what Iโ€™m going to do here today, as itโ€™s not super obvious what they do based on the name of the pseudo-element...

---

**[devsupporter ํ•ด์„ค]**

์ด ๊ธฐ์‚ฌ๋Š” CSS-Tricks์—์„œ ์ œ๊ณตํ•˜๋Š” ์ตœ์‹  ๊ฐœ๋ฐœ ๋™ํ–ฅ์ž…๋‹ˆ๋‹ค. ๊ด€๋ จ ๋„๊ตฌ๋‚˜ ๊ธฐ์ˆ ์— ๋Œ€ํ•ด ๋” ์•Œ์•„๋ณด์‹œ๋ ค๋ฉด ์›๋ณธ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.