CSS ::search-text 의사 요소

CSS의 ::search-text 의사 요소는 브라우저의 '페이지에서 찾기' 기능으로 일치하는 텍스트를 선택합니다. 예를 들어, 이 페이지에서 검색 기능을 사용하여 “search-text”를 찾으면, 모든 인스턴스가 하이라이트됩니다. 이 의사 요소를 사용하면 해당 하이라이트의 모양을 스타일링할 수 있습니다.

그리고 보너스로! 페이지에 여러 일치 항목이 있는 경우, ::search-text는 :current 의사 클래스와 함께 사용하여 현재 포커스된 일치 항목을 스타일링할 수 있습니다.

'페이지에서 찾기'는 CTRL + F (Windows용) 또는 ⌘F (Mac용) 키보드 단축키를 사용하여 할 수 있습니다.

::search-text {
  background: oklch(87% 0.17 90) /* yellow */;
  color: black;
...

CodePen 임베드 폴백

CSS의 ::search-text 의사 요소는 CSS Pseudo-Elements Module Level 4 사양에 정의되어 있습니다.

구문 (Syntax)

매우 간단합니다! 이 의사 요소를 선언하고 스타일 규칙을 추가하기만 하면 됩니다:

<요소 선택자>::search-text{
  /* ... */
}

사용법 (Usage)

일반적으로 자체적으로 (::search-text) 선언되지만, 특정 요소에 붙여서 사용할 수도 있습니다:

/* 모든 텍스트 */
::search-text {}
html::search-text {} /* 다소 중복적임 */
...

::search-text에서 선언할 수 있는 CSS 속성에는 약간의 제한이 있습니다. 지원하는 내용은 다음과 같습니다:

– background-color
– color
– text-decoration 및 관련 속성(text-underline-position과 text-underline-offset))
, 그리고 그와 관련된 구성 속성:
– text-decoration-color
– [text-decoration-line](https://css-tricks.com/almanac/properties/t/text-decoration/text-decoration-line/): 하지만 오직 grammar-error, spelling-error, line-through, none, 그리고 underline 값만 가능합니다.
– text-decoration-skip-ink
– text-decoration-style
– text-decoration-thickness
– text-shadow
– 사용자 정의 속성 (Custom properties)

그리고 네, 우리는 이를 사용자 정의 속성과 함께 사용할 수 있습니다. 예를 들면:

:root {
  --color-blueberry: oklch(0.5458 0.1568 241.39);
}
...

기본 사용법

::search-text 의사 요소(pseudo-element)를 사용하여

모든 후손 요소는 하이라이트 의사 요소(pseudo-elements)를 통해 적용된 스타일을 항상 상속받습니다. 이러한 방식으로 하이라이트에 설정된 개별 속성들은 트리(tree) 아래의 모든 요소로 전파(cascade)됩니다. 다음의 HTML 예시를 살펴보겠습니다:

<article>
  <h2>Highlight inheritance demo</h2>
  <p>Lorem ipsum dolor sit amet. <strong>Lorem</strong> appears again here. Another lorem appears here.
...

우리는 두 개의 자식 요소인 <h2>와 <p>를 가진 <article> 컨테이너를 가지고 있으며, 후자인 <p>는 자체적으로 <strong> 후손 요소를 가지고 있습니다. 우리는 다음과 같은 CSS를 사용하여 <article> 내의 ::search-text를 스타일링할 수 있으며, 이는 <article> 내의 모든 요소에 적용됩니다:

article::search-text {
  background: gold;
  color: black;
...

그다음, <p>와 그 후손 요소들에 대해서만 color 속성을 재정의(override)합니다:

p::search-text {
  color: orange;
}

그리고 <strong> 요소의 text-decoration에 대해서도 동일하게 수행합니다:

strong::search-text {
  text-decoration: line-through;
}

“lorem”을 검색하면, 첫 번째 인스턴스( <p> 내부에는 있지만 <strong> 외부에는 있는 경우)의 배경색은 <article>로부터 background와 text-decoration 값을 모두 상속받는 한편, color 값은 자신의 orange 값으로 재정의됩니다.

<strong>의 “lorem” 텍스트의 경우, 부모인 <p>와 조부모인 <article>에 설정한 속성들을 상속받습니다. 따라서 color와 background 값은 부모로부터 직접 상속되며, 재정의되지 않았기 때문에 그대로 유지됩니다. 반면 text-decoration 값은 line-through로 재정의됩니다.

CodePen Embed Fallback

이 예시의 핵심 요점은 하이라이트 요소에 대한 속성들 또한 개별적으로 상속되고 재정의된다는 것입니다.

텍스트 타겟팅하기 (Targeting a text)

아래 데모에서는 검색된 모든 텍스트에 파란색 밑줄을 긋기 위해 text-decoration을 underline으로 설정했습니다. 이런 방식을 통해, 기본 배경색은 그대로 유지하면서 일치하는 텍스트를 커스텀할 수 있으며, 이는 사용자들이 무엇이 일어나고 있는지 혼란스러워하는 것을 방지합니다.

::search-text {
  text-decoration: underline;
  text-decoration-color: oklch(65% 0.18 240);
...

CodePen Embed Fallback

:current 사용하기

::search-text를 :current와 함께 사용하면, 현재 포커스된 일치 항목(match)의 스타일을 지정할 수 있습니다. 예를 들어, 아래에서는 현재 일치하는 검색된 텍스트에 0.3em 두께의 연한 오렌지색 색조의 text-decoration-color를 적용합니다.

::search-text:current {
  text-decoration-color: oklch(85% 0.22 38);
  text-decoration-thickness: 0.3em;
...

CodePen Embed Fallback

접근성 관련 참고 사항

WCAG의 대비 표준을 준수하려면, 텍스트와 배경 사이에 최소 4.5:1의 대비비(contrast ratio)가 필요합니다. 또 다른 조언은 검색 색상을 너무 많이 바꾸지 않는 것입니다. 사실, 이 기능은 인지 장애가 있는 사용자에게 문제를 일으킬 수 있고, 브라우저의 핵심 부분으로서 일반적으로 혼란을 줄 수 있기 때문에 절제하여 사용해야 합니다. 개인적인 조언은 text-decoration 및 관련 속성들만 사용하는 것인데, 이들이 다른 속성들보다 더 미묘하기 때문입니다.

:past와 :future도 있습니다

:past와 :future 의사 클래스(pseudo-classes)는 각각 :current 요소의 이전 전체 요소와 이후 전체 요소를 매칭하도록 되어 있습니다.

하지만 명세(specification)에서는 다음과 같이 명시합니다:

:past 및 :future 의사 클래스는 향후 유사한 용도로 사용하기 위해 예약되어 있습니다. ::search-text와 이 의사 클래스들의 지원되지 않는 모든 조합은 유효하지 않은 것으로 처리되어야 합니다.

즉, :past, :future 또는 다른 어떤 의사 클래스도 ::search-text 의사 요소(pseudo-element)와 함께 사용할 수 없다는 의미입니다. 만약 사용 중인 브라우저가 이들을 어떻게든 작동시킨다면, 이슈(issue)를 제기하여 해당 예기치 않은 동작을 보고해 주시기 바랍니다.

명세 (Specification)

CSS ::search-text 의사 요소 (pseudo-element)는 CSS Pseudo-Elements Module Level 4 명세 (specification)에 정의되어 있습니다. 이는 아직 테스트 및 개선 단계에 있습니다.

브라우저 지원 (Browser support)

매우 폭넓은 지원:

관련 팁 (Related tricks!)

의사 요소 (pseudo elements)

기사 (Article) 2026년 1월 28일

::search-text 스타일링 및 기타 하이라이트 관련 의사 요소 (Styling ::search-text and Other Highlight-y Pseudo-Elements)

Daniel Schwarz

접근성 (accessibility) 속성 (attributes) HTML

기사 (Article) 2025년 8월 15일

hidden=until-found 다루기 (Covering hidden=until-found)

Geoff Graham

---