CSS에서 [attribute|="value"] 선택자를 사용하면 지정한 속성 값이 특정 값으로 시작하거나 해당 값과 정확히 일치하는 모든 요소를 손쉽게 선택할 수 있습니다. 예를 들어, lang 속성 값이 en 또는 en-US, en-GB처럼 en-으로 시작하는 요소를 한 번에 스타일링할 때 유용합니다.
[attribute|="value"] 선택자의 동작 방식
이 선택자는 다음 두 가지 경우에 요소를 매칭합니다.
- 속성 값이 지정한 값과 정확히 일치하는 경우 (예:
lang="en") - 속성 값이 지정한 값 뒤에 하이픈(
-)이 붙은 형태로 시작하는 경우 (예:lang="en-US")
아래 예제 코드를 실행해 보면, lang="en"을 가진 문단에는 주황색 테두리가 적용되고, lang="no"를 가진 문단에는 적용되지 않는 것을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
[lang|="en"] {
border: 5px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<p lang="en">Hello</p>
<p lang="no">Hei</p>
</body>
</html>실행 결과
Hello라는 텍스트를 가진 첫 번째 문단은 lang 속성 값이 en이므로 굵은 주황색 테두리와 둥근 모서리가 적용됩니다. 반면, 두 번째 문단 Hei는 lang="no"이므로 어떠한 스타일도 적용되지 않습니다.
참고: 유사한 속성 선택자들
[attr^="value"]: 속성 값이 지정한 값으로 시작하는 요소 선택 (하이픈 구분 없음)[attr$="value"]: 속성 값이 지정한 값으로 끝나는 요소 선택[attr*="value"]: 속성 값에 지정한 값이 포함되어 있는 요소 선택
언어 코드처럼 하이픈으로 구분된 값을 다룰 때는 |= 선택자가 가장 적합하며, 단순 문자열 접두사를 확인하고 싶다면 ^= 선택자를 사용하는 것이 좋습니다.