속성 선택자 정리

1. 태그의 속성을 선택
   [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)  

2. 태그의 속성과 속성값까지 선택
   [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)  

3. 클래스 이름을 선택
   [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)  

4. 단일 클래스 이름을 가졌거나 하이픈으로 연결된 것만 선택
   [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)  

5. 클래스 이름 중 ...로 시작하는 것들을 전부 선택
   [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)  

6. 클래스 이름 중 ...로 끝나는 것들을 전부 선택
   [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)  

7. 클래스 이름 중 ...가 들어가는 것들을 전부 선택
   [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)