CSS 속성 선택자 정리 – CSS [attribute] Selector

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> 선택함

 

출처 : https://wallel.com/css-%EC%86%8D%EC%84%B1-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A0%95%EB%A6%AC-css-attribute-selector/