css 작업에 사용하면 유용한 요소인 속성 선택자!

---

[attribute]

a[target] { color: red; }

a태그에 target이라는 속성을 가진 요소를 선택한다.

= <a href="#" target="_blank">link</a> 선택함
= <a href="#">link</a> 선택하지 않음

---

[attribute=”value”]

a[target="_blank"] { color: red; }

a태그에 target=”_blank”라는 속성을 가진 요소를 선택한다.
※ target이 반드시 _blank인 요소만 잡으니 주의!

= <a href="#" target="_blank">link</a> 선택함
= <a href="#" target="_self">link</a> 선택하지 않음
= <a href="#" target="_blankk">link</a> 선택하지 않음

---

[attribute~=”value”]

div[class~="apple"] { background-color: red; }

apple이라는 class를 가진 요소를 선택한다.
※ 여러개의 class가 함께 지정되어 있어도, apple을 가졌다면 선택한다.

= <div class="apple">layer</div> 선택함
= <div class="pine apple">layer</div> 선택함
= <div class="pine-apple">layer</div> 선택하지 않음

---

[attribute|=”value”]

div[class|="layer"] { background-color: red; }

layer라는 class로 시작하는 요소만 선택하되, 하이픈으로 구분해 더 많은, 더 다양한 요소를 선택할 수 있다.

= <div class="layer">layer</div> 선택함
= <div class="layer-red">layer</div> 선택함
= <div class="layer-blue">layer</div> 선택함
= <div class="layer yellow">layer</div> 선택하지 않음
= <div class="green layer">layer</div> 선택하지 않음

---

[attribute^=value]

div[class^="minions"] { background-color: red; }

minions라는 class로 시작하는 요소를 전부 선택한다.

= <div class="minions">layer</div> 선택함
= <div class="minions-yellow">layer</div> 선택함
= <div class="minions_yellow">layer</div> 선택함
= <div class="minions minimini">layer</div> 선택함
= <div class="yellow minions">layer</div> 선택하지 않음
= <div class="yellow_minions">layer</div> 선택하지 않음

---

[attribute$=value]

div[class$="end"] { background-color: red; }

end라는 class로 끝나는 요소를 선택한다.
.pdf등을 값(value)으로 지정해 특정 파일만 선택하는 것도 가능하다.

= <div class="end">layer</div> 선택함
= <div class="start end">layer</div> 선택함
= <div class="ok_end">layer</div> 선택함
= <div class="end bye">layer</div> 선택하지 않음

---

[attribute*=value]

div[class*="wow"] { background-color: red; }

wow라는 class를 가진 모든 요소를 선택한다.
class가 어떻게 조합이 되어도 wow만 완성되면 무조건 선택한다.

= <div class="wow">layer</div> 선택함
= <div class="wow ohoh">layer</div> 선택함
= <div class="wow-haha">layer</div> 선택함
= <div class="wwwwwow">layer</div> 선택함