CSS 선택자: 속성 선택자

CSS 속성 선택자(Attribute Selector) 는 HTML 요소가 가진 속성(attribute)을 기준으로 요소를 선택하여 스타일을 적용하는 방법입니다.

쉽게 비유하면,

"모든 파란색 옷을 입은 사람들만 모아서 특정 스타일을 적용하겠다"

라는 식으로, HTML 요소에 이미 존재하는 속성 값을 기준으로 특정 요소들만 골라내는 방법입니다.

 

---

1. 기본적인 형태

속성 선택자는 아래와 같이 사용합니다.

요소[속성] {
    스타일;
}

요소[속성="값"] {
    스타일;
}

• [속성] : 특정 속성이 있는 요소를 선택합니다.
• [속성="값"] : 특정 속성이 정확히 해당 값을 가진 요소를 선택합니다.

 

 

2. 쉽게 이해하는 예시

예제 HTML:

<a href="https://naver.com">네이버 링크</a>
<a href="https://google.com" target="_blank">구글 링크 (새 창)</a>
<a>링크가 아닌 텍스트</a>

이 HTML에는 다양한 링크가 있습니다. 특정 링크만 스타일을 주고 싶다면 속성 선택자를 씁니다.

 

2-1: 특정 속성이 있는 요소 선택하기

a[href] {
    color: blue;
    text-decoration: underline;
}

이 CSS는 href 속성이 있는 모든 <a> 태그를 선택하여 파란색과 밑줄 스타일을 줍니다.

2-1 예시

 

2-2: 특정 속성값이 정확히 일치하는 요소 선택하기

a[target="_blank"] {
    color: red;
    font-weight: bold;
}

이 CSS는 정확히 target="_blank" 속성을 가진 링크만 빨간색 굵은 글씨로 만듭니다.

2-2 예시

 

 

3. 조금 더 다양한 속성 선택자

CSS 속성 선택자에는 다양한 표현 방식이 있습니다.

선택자 예시	의미
[속성^="값"]	속성값이 특정 값으로 시작
[속성$="값"]	속성값이 특정 값으로 끝남
[속성*="값"]	속성값이 특정 값을 포함

예시: 특정 URL로 시작하는 링크 선택하기

a[href^="https://google"]
{
  border-bottom: 2px solid orangered;
}

a[href$=".com"] {
  color: purple;
}

a[href*="naver"] {
  border-bottom: 2px solid green;
}

이렇게 하면 순서대로 구글 링크에는 주황색 밑줄,

.com로 끝나는 링크의 색은 보라색,

naver를 포함한 링크에는 초록색 밑줄이 생깁니다.

3 예시

 

 

마치며

속성 선택자는 다음과 같이 정리할 수 있습니다.

• 어디에 쓰나?: 특정 속성으로 요소를 골라 스타일을 적용할 때 씁니다.
• 예시 활용:
  • 특정 사이트 링크만 스타일 주기
  • 이미지 확장자에 따라 스타일 변경하기
  • 입력 폼의 특정 필드만 강조하기

속성 선택자를 잘 쓰면 더 효율적이고 정확하게 원하는 요소에 스타일을 줄 수 있습니다.

도움이 되셨길 바랍니다 :)

 

출처

속성 선택자 - Web 개발 학습하기 | MDN