| 선택자 | 설명 |
|---|
| 선택자[속성] | 선택자에 의해서 선택된 태그 중 해당 속성이 있는 태그만 선택됨 |
| 선택자[속성="값"] | 선택된 태그 중 해당 속성이 있고 그 속성의 정의된 값과 동일한 값의 태그만 선택됨. |
| 선택자[속성~="값"] | 선택된 태그 중 속성의 값과 동일하거나 스페이스로 구분된 값 중 동일한 값이 있을 때 선택된다. |
| 선택자[속성ㅣ"값"] | 선택된 태그 중 속성의 값과 동일하거나 해당 값과 동일하게 시작하면서 다음에 "-"이 오는 경우 선택됨. |
| 선택자[속성^="값"] | 선택된 태그 중 속성의 값으로 시작하면 선택됨. |
| 선택자[속성$="값"] | 선택된 태그 중 속성의 값의 마지막 부분과 같을때 선택됨. |
| 선택자[속성*=“값”] | 선택된 태그 중 속성의 값에 포함되어 있을때 선택됨. |
1. 선택자[속성]
<style>
a[href]{color:red;} // a 태그이면서 href 속성이 있는 것들 해당.
*[class]{color:blue;} // 모든 선택자이면서 class 속성이 있는 것들이 해당
</style>
<body>
<h1 class= ‘class1’>blue선택됨</h1>
<p>선택안됨<span class= ‘class1’>blue선택됨 </span></p>
<h2 href= “#”>선택안됨</h2>
<h5 class= ‘class2’>선택됨</h5>
<a>선택안됨</a>
<a href= “#”>red선택됨</a>
</body>
2. 선택자[속성="값"]
<style>
*[href= '#']{color:red;} <!--모든 태그이면서 속성 값이 "#" 인것들-->
h1[class= 'class1']{color:orange;} <!--h1이면서 클래스 속성이면서 값이 "class1" 인것들-->
</style>
<body>
<h1 class= 'class1'>orange선택됨</h1>
<p>선택안됨<span class= 'class1'>선택안됨</span></p>
<h2 href= '#'>red선택됨</h2>
<h5 class= "class2">선택안됨</h5>
<a>선택안됨</a>
<a href= 'a'>red선택안됨</a>
</body>
3. 선택자[속성~=“값”]
<style>
p[class~="bb"]{color:blue;}
</style>
<body>
<p class= "aa bb cc">blue선택됨</p>
<p class= "bb">blue선택됨</p>
<p class= "bbc">선택안됨</p>
<p class= "bb-cc">선택안됨</p>
<p class= "abb bbb cc">선택안됨</p>
</body>
4. 선택자[속성|=“값”]
<style>
*[class|= "aa"]{color:blue;}
</style>
<body>
<h1 class= 'aa'>blue선택됨</h1>
<p>선택안됨
<span class='aabb'>선택안됨</span>
</p>
<h2 href= "aa">선택안됨</h2>
<h5 class= 'aa-bb'>blue선택됨</h5>
<a class= 'bb-aa'>선택안됨</a>
<a class= "bb aa">선택안됨</a>
</body>
5. 선택자[속성^=“값”]
<style>
*[class^= "aa"]{color:blue;}
</style>
<body>
<h1 class= 'aa'>blue선택됨</h1>
<p>선택안됨<span class= 'aabb'>blue선택됨</span> </p>
<h2 href= "aa">선택안됨</h2>
<h5 class= 'aa-bb'>blue선택됨</h5>
<a class= 'bb-aa'>선택안됨</a>
<a class= 'bb aa'>선택안됨</a><a class= 'aa bb'>선택됨</a>
</body>
6. 선택자[속성$=“값”]
<style>
*[class$= "aa"]{color:blue;}
</style>
<body>
<h1 class= 'aa'>blue선택됨</h1>
<p>선택안됨<span class= 'aabb'>선택안됨</span></p>
<h2 href= 'aa'>선택안됨</h2>
<h5 class= 'aa-bb'>선택안됨</h5>
<a class= 'bb-aa'>blue선택됨</a>
<a class= 'bb aa'>blue선택됨</a><a class= 'aa bb'>선택안됨</a>
</body>
7. 선택자[속성*=“값”]
<style>
*[class*= "aa"]{color:blue;}
</style>
<body>
<h1 class= 'aa'>blue선택됨</h1>
<p>선택안됨<span class= 'aabb'>blue선택됨</span></p>
<h2 href= "aa">선택안됨</h2>
<h5 class= 'aa-bb'>blue선택됨</h5>
</body>
