속성 선택자 [~]

---

속성선택자

• HTML에 작성한 속성 혹은 속성+값을 그대로 css에 작성하는 선택자, 대괄호[]로 묶음

---

예시

1. [attr] -> 해당 속성의 요소 선택

CSS

[class] {
  color: red;
}

HTML

<ui class="fruits">
  <span class="sale-orange">오렌지</span> ---->선택됨    
  <p class="red">딸기</p>                 ---->선택됨
  <li class="yellow">망고</li>            ---->선택됨
  <li class="sale-red">사과</li>          ---->선택됨
</ui>

2. [attr=value] -> 해당 속성의 해당 값을 가진 요소 선택

CSS

[class="red"] {
  color: red;
}

HTML

<ui class="fruits">
  <span class="sale-orange">오렌지</span>     
  <p class="red">딸기</p>                 ---->선택됨
  <li class="yellow">망고</li>
  <li class="sale-red">사과</li>
</ui>

3. [attr^=value] -> 해당 속성의 해당 값으로 시작하는 요소 선택

CSS

[class^="sale"] {
  color: red;
}

HTML

<ui class="fruits">
  <span class="sale-orange">오렌지</span> ---->선택됨    
  <p class="red">딸기</p>                     
  <li class="yellow">망고</li>
  <li class="sale-red">사과</li>          ---->선택됨
</ui>

4. [attr$="value"] -> 해당 속성의 해당 값으로 끝나는 요소 선택

CSS

[class$="orange"] {
  color: red;
}

HTML

<ui class="fruits">
  <span class="sale-orange">오렌지</span> ---->선택됨    
  <p class="red">딸기</p>                     
  <li class="yellow">망고</li>
  <li class="sale-red">사과</li>          
</ui>