더북(TheBook)

또한, 속성과 속성값까지 정확하게 일치하는 요소에 스타일을 적용하고 싶다면 다음과 같이 속성과 값을 함께 명시하면 됩니다. 다음 코드는 a 태그의 target 속성값이 _blank인 요소를 선택합니다.

05/01/attribute_selector_2.html

<style>
  a[target="_blank"]{
    color:red;
  }
</style>
(중략)
<a href="#">기본 a 태그</a>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a> 

 

a 태그의 target 속성값이 _blank인 요소에 적용

클래스 선택자나 아이디 선택자도 각각 class 속성과 id 속성으로 선택자를 지정하므로 넓은 범위에서는 속성 선택자에 포함됩니다. 요컨대, 다음처럼 작성해도 됩니다.

[class="red"]{} /* 기본 속성 선택자 방법으로 class 속성값이 red인 요소 선택 */
[id="title"]{} /* 기본 속성 선택자 방법으로 id 속성값이 title인 요소 선택 */
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.