특정 속성(attribute)을 가진 HTML 요소를 선택하려면 CSS의 [attribute] 셀렉터를 사용합니다.
예를 들어 alt 속성이나 target 속성처럼, 요소에 해당 속성이 존재하기만 하면 값과 상관없이 모두 선택할 수 있습니다.
CSS [attribute] 셀렉터 기본 문법
기본 문법은 다음과 같습니다. 대괄호 안에 찾고자 하는 속성 이름을 넣으면 됩니다.
요소명[속성명] {
/* 스타일 선언 */
}속성 이름 앞에 요소명을 붙이면 해당 요소 중에서만 속성을 가진 것을 선택하고, 요소명을 생략하면 모든 요소 중에서 해당 속성을 가진 것을 선택합니다.
alt 속성이 있는 img 요소 선택 예제
아래 코드는 img[alt] 셀렉터를 사용해 alt 속성을 가진 이미지에만 주황색 테두리를 적용하는 예제입니다. 첫 번째 이미지는 alt 속성이 없어서 스타일이 적용되지 않고, 두 번째 이미지에만 테두리가 나타납니다.
예제 코드
<!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>실행 결과 설명
- 첫 번째 이미지: alt 속성이 없으므로
img[alt]셀렉터의 대상이 아니며, 테두리가 적용되지 않습니다. - 두 번째 이미지:
alt="Tutorials Library"속성이 있으므로 주황색 3px 테두리가 적용됩니다.
참고: 더 정밀한 속성 선택 방법
단순히 속성의 존재 여부뿐 아니라 값을 조건으로 지정할 수도 있습니다.
[alt="값"]– 속성값이 정확히 일치하는 요소 선택[alt~="값"]– 속성값 목록 중 해당 단어가 포함된 요소 선택[alt^="값"]– 속성값이 특정 문자열로 시작하는 요소 선택[alt$="값"]– 속성값이 특정 문자열로 끝나는 요소 선택[alt*="값"]– 속성값에 특정 문자열이 포함된 요소 선택
이러한 속성 셀렉터를 활용하면 클래스나 ID를 추가하지 않고도 HTML 구조 그대로 원하는 요소를 유연하게 스타일링할 수 있습니다.