CSS의 [attribute] 선택자는 특정 속성(attribute)을 가진 HTML 요소를 선택할 때 사용합니다. 예를 들어 alt 속성이나 target 속성처럼, 지정한 속성이 존재하는 요소만 골라 스타일을 적용할 수 있습니다.
CSS [속성] 선택자란?
대괄호 안에 속성 이름을 넣어 표기하며, 해당 속성의 값과 상관없이 속성 자체가 존재하는 모든 요소에 스타일이 적용됩니다. 기본 문법은 다음과 같습니다.
선택자[속성명] {
/* 스타일 선언 */
}예제: alt 속성을 가진 이미지에 테두리 적용하기
아래 코드는 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 속성이 없으므로 테두리가 적용되지 않습니다.
- 두 번째 이미지: alt="Tutorials Library" 속성이 있으므로 3px 두께의 주황색 테두리가 표시됩니다.
참고: 다양한 속성 선택자 조합
[속성] 선택자는 단독으로도 사용할 수 있지만, 아래와 같은 변형 문법과 함께 활용하면 더욱 정교한 스타일링이 가능합니다.
[attribute=value]– 속성값이 정확히 일치하는 요소 선택[attribute~=value]– 속성값에 특정 단어를 포함하는 요소 선택[attribute^=value]– 속성값이 특정 문자열로 시작하는 요소 선택[attribute$=value]– 속성값이 특정 문자열로 끝나는 요소 선택