CSS에서 [attribute ~= "value"] 선택자를 사용하면 속성 값 안에 지정한 단어가 포함된 요소를 선택할 수 있습니다.
[attribute ~= "value"] 선택자란?
이 선택자는 속성 값이 공백으로 구분된 여러 단어로 이루어져 있을 때, 그중에서 지정한 단어가 정확히 일치하는 경우에 해당 요소를 선택합니다. 부분 문자열이 아닌 완전한 단어 단위로 매칭된다는 점이 중요합니다.
아래 예제 코드를 실행하여 [attribute ~= "value"] 선택자의 동작을 확인해 보세요. 여기서 검색하는 단어는 "Tutorials"입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
[alt ~= Tutorials] {
border: 5px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<img src = "https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" height = "200" width = "200" alt = "Tutor Connect">
<img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height = "200" width="200" alt = "Tutorials Library">
</body>
</html>실행 결과 설명
위 코드에서 첫 번째 이미지의 alt 속성 값은 "Tutor Connect"이므로 "Tutorials"라는 단어를 포함하지 않아 스타일이 적용되지 않습니다. 반면 두 번째 이미지의 alt 속성 값은 "Tutorials Library"로 "Tutorials"라는 단어를 포함하고 있기 때문에 주황색 테두리와 둥근 모서리 스타일이 적용됩니다.
참고: 유사한 속성 선택자들
- [attribute *= "value"]: 속성 값에 지정한 문자열이 부분적으로라도 포함되면 선택합니다.
- [attribute ^= "value"]: 속성 값이 지정한 문자열로 시작하면 선택합니다.
- [attribute $= "value"]: 속성 값이 지정한 문자열로 끝나면 선택합니다.
단어 단위의 정확한 매칭이 필요하다면 [attribute ~= "value"] 선택자를, 단순 부분 문자열 매칭이 필요하다면 [attribute *= "value"] 선택자를 사용하는 것이 좋습니다.