HTML 요소 중에서 특정 속성(attribute)을 가진 요소만 골라서 스타일을 적용하고 싶다면, CSS의 [attribute] 선택자를 사용하면 됩니다.
예를 들어 이미지 태그의 alt 속성이나 링크 태그의 target 속성처럼, 속성 자체의 존재 여부를 기준으로 요소를 선택할 수 있습니다.
아래 예제 코드를 직접 실행해 보면 CSS [attribute] 선택자가 어떻게 동작하는지 쉽게 이해할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
img[alt] {
border: 3px solid orange;
}
</style>
</head>
<body>
<img src = "https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" height="200" width="200">
<img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" height="200" width="200" alt="Tutorials Library">
</body>
</html>코드 설명
위 예제에서 img[alt]는 alt 속성을 가진 <img> 요소만 선택합니다. 따라서 첫 번째 이미지에는 alt 속성이 없어 주황색 테두리가 적용되지 않고, 두 번째 이미지에만 3px 두께의 주황색 테두리가 표시됩니다.
이처럼 [attribute] 선택자를 활용하면 클래스나 아이디를 추가하지 않고도 속성의 유무만으로 원하는 요소를 간편하게 스타일링할 수 있으며, 접근성을 위해 반드시 작성해야 하는 alt 속성이 빠진 이미지를 시각적으로 강조하는 용도로도 유용하게 활용됩니다.