CSS [속성=값] 선택자란?
CSS의 [속성="값"] 선택자는 HTML 요소가 가진 특정 속성(attribute)과 그 값(value)이 정확히 일치하는 경우에만 해당 요소를 선택하는 선택자입니다. 예를 들어, rel 속성이 nofollow로 설정된 링크만 골라 별도의 스타일을 적용할 수 있습니다.
기본 문법
선택자[속성 = "값"] {
/* 적용할 스타일 */
}
대괄호 안에 속성과 값을 지정하며, 값이 완전히 일치해야만 스타일이 적용됩니다. 부분 일치가 아닌 정확한 일치 조건이라는 점에 유의하세요.
예제: rel 속성으로 링크 구분하기
아래 코드는 <a> 태그 중 rel="nofollow" 속성을 가진 링크에만 주황색 테두리를 적용하는 예제입니다. 두 번째 링크는 rel="noreferrer"이므로 이 스타일의 영향을 받지 않습니다.
<!DOCTYPE html>
<html>
<head>
<style>
a[rel = nofollow] {
border: 3px solid orange;
}
</style>
</head>
<body>
<a href = "https://qries.com/What-is-Uber-s-business-model-and-how-does-it-compare-with-Ola-s-model-in-India" rel="nofollow">Uber's Business Model</a><br><br>
<a href = "https://www.qries.com/How-does-share-market-work-in-India" rel="noreferrer">Share Market</a>
</body>
</html>
실행 결과
- Uber's Business Model 링크:
rel="nofollow"이므로 주황색 테두리가 적용됩니다. - Share Market 링크:
rel="noreferrer"이므로 테두리가 적용되지 않습니다.
참고: 함께 알아두면 좋은 속성 선택자
[속성]: 해당 속성을 가진 모든 요소 선택[속성~="값"]: 공백으로 구분된 단어 목록에 해당 값이 포함된 경우 선택[속성^="값"]: 지정한 값으로 시작하는 경우 선택[속성$="값"]: 지정한 값으로 끝나는 경우 선택[속성*="값"]: 지정한 값을 포함하는 경우 선택
이처럼 속성 선택자를 활용하면 클래스나 ID를 추가하지 않고도 HTML 속성만으로 원하는 요소를 정밀하게 스타일링할 수 있습니다.