또한, 속성과 속성값까지 정확하게 일치하는 요소에 스타일을 적용하고 싶다면 다음과 같이 속성과 값을 함께 명시하면 됩니다. 다음 코드는 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인 요소 선택 */
    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.