CSS에서 [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"라는 단어를 포함하고 있기 때문에, 주황색 5px 테두리와 둥근 모서리 스타일이 적용됩니다.
참고로 이 선택자는 [attribute *= "value"](부분 문자열 포함 여부 확인)와는 다릅니다. ~를 사용하는 선택자는 단어 단위로 정확히 일치해야 하며, 단어의 일부분만 일치하는 경우에는 선택되지 않는다는 점에 유의하세요.