속성 선택자 정리

태그의 속성을 선택
[attribute] : a[target] {color: blue;}
a 태그에 target 이라는 속성을 가진 요소를 선택한다.(“target”이라는 속성을 가지고 있으면 전부 선택)
```
<a href="#" target="_blank">link</a> (O)  
<a href="#" target="_self">link</a> (O)  
<a href="#">link</a> (X)  
```
태그의 속성과 속성값까지 선택
[attribute=”value”] : a[target="_blank"] {color: blue;}
a 태그에 [target=”_blank”] 라는 속성을 가진 요소 선택
```
<a href="#" target="_blank">link</a> (O)  
<a href="#" target="_self">link</a> (X)  
<a href="#" target="_blankk">link</a> (X)  
```
클래스 이름을 선택
[attribute~~=”value”] : ` div[class~~=”money”] {color: blue;} `
money 라는 class를 가진 요소를 선택한다.
단, 여러 개의 class가 함께 지정되어 있어도 money를 가졌다면 선택한다.
```
<div class="money">money</div> (O)  
<div class="company money">money</div> (O)  
<div class="company-money">money</div> (X)  
```
단일 클래스 이름을 가졌거나 하이픈으로 연결된 것만 선택
[attribute|=”value”] : div[class|="hyphen"]{color: blue;}
hyphen이라는 class로 시작하는 요소로 선택하되, 하이픈이 붙어있는 요소들도 선택한다.
```
<div class="hyphen">money</div> (O)  
<div class="hyphen-red">money</div> (O)  
<div class="hyphen-blue">money</div> (O)  
<div class="hyphen yellow">money</div> (X)  
<div class="green hyphen">money</div> (X)  
```

클래스 이름 중 …로 시작하는 것들을 전부 선택
[attribute^=”value”] : div[class^="start"] {color: blue;}
start라는 class로 시작하는 요소들을 전부 선택한다.

<div class="start">money</div> (O)  
<div class="start-yellow">money</div> (O)  
<div class="start">money</div> (O)  
<div class="start minimini">money</div> (O)  
<div class="yellow start">money</div> (X)  
<div class="yellow_start">money</div> (X)

클래스 이름 중 …로 끝나는 것들을 전부 선택
[attribute$=”value”] : div[class$="end"] {color: blue;}
end라는 class로 끝나는 요소들을 모두 선택한다.
.pdf 등을 값(value)으로 지정해 특정 파일만 선택하는 것도 가능하다.
```
<div class="end">moeny</div> (O)  
<div class="start end">money</div> (O)  
<div class="ok_end">money</div> (O)  
<div class="end bye">money</div> (X)  
```
클래스 이름 중 …가 들어가는 것들을 전부 선택
[attribute*=”value”] : div[class*="all"] {color: blue;}
all이라는 class를 가진 모든 요소를 선택한다.
class가 어떻게 조합이 되어도 all만 완성되면 무조건 선택한다.
```
<div class="all">moeny</div> (O)  
<div class="all ohoh">money</div> (O)  
<div class="all-haha">money</div> (O)  
<div class="allallll">money</div> (O)  
```

CSS Attribute Selector

CSS Attribute Selector

속성 선택자 정리