--- title: How to Style the New ::search-text and Other Highlight-y... description: Chrome 144 introduced the ::search-text pseudo-element for styling find-in-page text matches. This guide covers all highlight-related pseudo-elements... canonical: https://daily.dev/posts/cwspusqs7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | daily.dev og:description: Chrome 144 introduced the ::search-text pseudo-element for styling find-in-page text matches. This guide covers all highlight-related pseudo-elements... og:url: https://daily.dev/posts/cwspusqs7 og:image: https://api.daily.dev/og/posts/CwsPUsqS7.png og:image:alt: Post cover image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How to Style the New ::search-text and Other Highlight-y Pseudo-Elements **[CSS](https://daily.dev/sources/iheartcss)** · [@geoffgraham](https://daily.dev/geoffgraham) · 0 upvotes · 0 comments ## Summary Chrome 144 introduced the ::search-text pseudo-element for styling find-in-page text matches. This guide covers all highlight-related pseudo-elements (::search-text, ::target-text, ::selection, ::highlight(), ::spelling-error, ::grammar-error) and demonstrates how to style them accessibly using relative color syntax to invert background colors. The technique ensures highlights stand out with proper contrast while remaining visually distinctive from each other, even when overlapping. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [::search-text](https://daily.dev/posts/search-text-c51fk3h81) · CSS-Tricks · 32 upvotes · 4 comments - [Working with ::highlight\(\) using progressive enhancement](https://daily.dev/posts/working-with-highlight-using-progressive-enhancement-svttq0eh5) · Piccalilli · 1 upvotes · 0 comments - [::target-text: An easy way to style text fragments](https://daily.dev/posts/target-text-an-easy-way-to-style-text-fragments-54hdvjlwy) · WebKit · 0 upvotes · 1 comments - [Chrome for Developers](https://daily.dev/posts/chrome-for-developers-hjcy7dv8r) · Chrome Developers · 211 upvotes · 3 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#google-chrome](https://daily.dev/tags/google-chrome), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/cwspusqs7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/cwspusqs7","headline":"How to Style the New ::search-text and Other Highlight-y Pseudo-Elements","text":"Shared: How to Style the New ::search-text and Other Highlight-y Pseudo-Elements","url":"https://daily.dev/posts/cwspusqs7","datePublished":"2026-01-28T15:36:15.883Z","dateModified":"2026-01-28T15:36:15.887Z","author":{"@type":"Person","name":"Geoff","url":"https://daily.dev/geoffgraham","image":"https://media.daily.dev/image/upload/s--mXp5yqc7--/f_auto/v1746709785/avatars/avatar_JAehePvXH6nu6u9F4E9YV?_a=BAMClqUq0","description":"Certified Neat Freak","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":940}},"image":"https://media.daily.dev/image/upload/s--foaA6JGU--/f_auto/v1722860399/public/Placeholder%2004","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"sharedContent":{"@type":"WebPage","url":"https://api.daily.dev/r/TrqrIQYIe"},"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/iheartcss","name":"CSS"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS","item":"https://daily.dev/squads/iheartcss"},{"@type":"ListItem","position":3,"name":"How to Style the New ::search-text and Other Highlight-y Pseudo-Elements"}]} ```