CSS 속성선택자 정리

1) [attribute]

• 속성을 가진 태그를 선택
  예) [href] -> href 속성을 가진 태그를 선택

  <a href="naver.com">네이버</a> <!-- 선택 -->

2) [attribute="value"]

• 속성값에 "value"만 있는 요소 선택

  예) [class="apple"]

  <div class="apple"></div> <!-- 선택 -->
  <div class="btn apple"></div> <!-- 선택안함 -->
  <div class="apple btn"></div> <!-- 선택안함 -->
  <div class="btn-apple"></div> <!-- 선택안함 -->
  <div class="apple-btn"></div> <!-- 선택안함 -->

3) [attribute~="value"]

• 속성값으로 "value"를 가진 요소 선택
• 여러개의 속성값을 가졌다해도 "value"를 갖고 있으면 요소 선택
  예) [class~="apple"]

  <div class="apple"></div> <!-- 선택 -->
  <div class="btn apple"></div> <!-- 선택 -->
  <div class="apple btn"></div> <!-- 선택 -->
  <div class="btn-apple"></div> <!-- 선택안함 -->
  <div class="apple-btn"></div> <!-- 선택안함 -->

4) [attribute*="value"]

• 속성값에 "value"값을 포함한 모든 요소 선택
  예) [class*="apple"]

  <div class="apple"></div> <!-- 선택 -->
  <div class="btn apple"></div> <!-- 선택 -->
  <div class="apple btn"></div> <!-- 선택 -->
  <div class="btn-apple"></div> <!-- 선택 -->
  <div class="apple-btn"></div> <!-- 선택 -->

5) [attribute^="value"]

• 속성값이 "value"로 시작하는 요소만 선택
  예) [class^="apple"]

    <div class="apple"></div> <!-- 선택 -->
    <div class="apple-btn"></div> <!-- 선택 -->
    <div class="apple btn"></div> <!-- 선택 -->
    <div class="btn apple"></div> <!-- 선택안함 -->
    <div class="btn-apple"></div> <!-- 선택안함 -->

6) [attribute$="value"]

• 속성값이 "value"로 끝나는 요소만 선택
  예) [class^="apple"]

    <div class="apple"></div> <!-- 선택 -->
    <div class="btn apple"></div> <!-- 선택 -->
    <div class="btn-apple"></div> <!-- 선택 -->
    <div class="apple btn"></div> <!-- 선택안함 -->
    <div class="apple-btn"></div> <!-- 선택안함 -->
  

7) [attribute|="value"]

• 속성값에 "value"만 있거나, "value"뒤에 바로 하이픈이 붙는 값만 있는 요소 선택
  예) [class|="apple"]

  <div class="apple"></div> <!-- 선택 -->
  <div class="apple-btn"></div> <!-- 선택 -->
  <div class="apple-btn orange"></div> <!-- 선택안함 -->
  <div class="apple_btn"></div> <!-- 선택안함-->
  <div class="apple btn"></div> <!-- 선택안함 -->
  <div class="btn apple"></div> <!-- 선택안함 -->
  <div class="btn-apple"></div> <!-- 선택안함 -->