CSS [attribute|="value"] 선택자 – 특정 값 또는 그 값 뒤에 하이픈(-)이 오는 속성 선택

정의 및 사용 방법

[attribute|="value"] 선택자는
value라는 값과 정확히 일치, 또는 value로 시작하고 바로 뒤에 하이픈(-, U+002D)이 오는 값을 가진 모든 요소를 선택합니다.

예를 들어, [lang|="en"]은 lang="en"처럼 lang 속성 값이 en과 정확히 일치하거나, lang="en-US"처럼 en으로 시작하고 바로 뒤에 하이픈(-)이 오는 값을 가진 모든 요소를 선택합니다.

이 선택자는 주로 HTML의 lang 속성 값 등에서 사용되는 language tags(언어 태그, 예: en, en-US, en-GB)를 타겟팅할 때 자주 사용됩니다.

기본 예제

HTML

<!-- 매칭 ✅  (정확히 en) -->
<p lang="en">en Hello</p> 

<!-- 매칭 ✅  (en 뒤에 하이픈) -->
<p lang="en-US">en-US Hello</p> 
<p lang="en-GB">en-GB Hello</p>

<!-- 매칭 ❌ (하이픈 없이 시작) -->
<p lang="english">english Hello</p> 

<!-- 매칭 ❌ (공백으로 구분된 단어) -->
<p lang="en us">en us Hello</p>

구문

다음의 두 가지 형태는 모두 동일합니다.

[attribute|="value"]
[attribute|='value']

참고 사항

[attribute|="value"]는 value라는 값과 정확히 일치, 또는 value로 시작하고 바로 뒤에 하이픈(-, U+002D)이 오는 값을 가진 모든 요소를 선택합니다.

반면에, [attribute^="value"] 선택자는 지정된 attribute라는 이름의 속성이 value라는 값으로 시작하는 모든 요소를 선택합니다.

HTML

<p lang="en">en Hello</p> 
<p lang="en-US">en-US Hello</p> 
<p lang="en-GB">en-GB Hello</p>
<p lang="english">english Hello</p> 
<p lang="en us">en us Hello</p>