CSS에서 속성 값이 특정 문자열로 끝나는 요소를 선택하려면 [attribute$="value"] 선택자를 사용합니다. 이 글에서는 이 선택자를 활용해 href 속성 값이 .htm으로 끝나는 모든 <a> 요소를 선택하는 방법을 알아보겠습니다.
[attribute$="value"] 선택자란?
$= 연산자는 '속성 값이 지정된 문자열로 끝난다'는 의미를 가집니다. 따라서 [href$=".htm"]처럼 작성하면, href 속성 값이 .htm으로 끝나는 링크만 골라낼 수 있습니다.
주요 활용 사례
- 특정 확장자(.htm, .pdf 등)를 가진 링크만 스타일 구분하기
- 외부 문서 링크에 아이콘이나 테두리 추가하기
- 문서 타입별로 다른 시각적 표현 적용하기
예제 코드
아래 코드를 실행하면 href 속성이 .htm으로 끝나는 링크에 주황색 테두리가 적용되고, .pdf로 끝나는 링크에는 적용되지 않습니다.
<!DOCTYPE html>
<html>
<head>
<style>
[href$ = htm] {
border: 5px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<a href = "https://tutorialspoint.com/java/index.htm">Java Tutorial</a>
<a href = "https://www.tutorialspoint.com/java/java_tutorial.pdf">Java Tutorial PDF</a>
</body>
</html>실행 결과
위 예제에서 첫 번째 링크인 'Java Tutorial'은 href 속성 값이 .htm으로 끝나기 때문에 주황색 테두리와 둥근 모서리가 적용됩니다. 반면 두 번째 링크인 'Java Tutorial PDF'는 .pdf로 끝나므로 해당 스타일이 적용되지 않습니다.
관련 속성 선택자 정리
| 선택자 | 설명 |
|---|---|
| [attribute] | 해당 속성을 가진 모든 요소 선택 |
| [attribute=value] | 속성 값이 지정한 값과 정확히 일치하는 요소 선택 |
| [attribute^=value] | 속성 값이 지정한 값으로 시작하는 요소 선택 |
| [attribute$=value] | 속성 값이 지정한 값으로 끝나는 요소 선택 |
| [attribute*=value] | 속성 값에 지정한 값을 포함하는 요소 선택 |