CSS - 속성 선택자

속성 선택자로 사용할 수 있는 표현은 다음 표를 참고합니다.

선택자	설 명
[속성]	속성과 일치하는 요소.
[속성="값"]	속성과 값이 일치하는 요소.
[속성 ~="값"]	속성의 값을 포함하는 요소. 단어 기준으로 판단함. 속성 값이 여러 개라도 특정 단어와 일치하면 적용.
[속성 |= "a"]	"a"와 일치하거나 "a-"로 시작되는 요소.
[속성 ^= "a"]	a로 시작하는 문자.
[속성 $= "a"]	a로 끝나는 문자.
[속성 *= "a"]	a가 어느 위치에 있든 포함하고 있으면 적용.

[속성] 선택자

a 태그 안에 href 속성이 있는 태그를 찾습니다.

<style>
/* a 태그에 href 속성이 있는 요소 */
a[href] {
  background-color: yellow;
}
</style>

<!-- 일치 -->
<a href="">a 내용</a>

<!-- 불일치 -->
<div href="">b 내용</div>

<!-- 불일치 -->
<a name="하보니">c 내용</a>

name 속성을 가진 태그에 스타일을 적용합니다.

<style>
/* name 속성을 가진 요소 */
[name] {
  background-color: yellow;
}
</style>

<!-- 불일치 -->
<p title="">a 내용</p>

<!-- 일치 -->
<div name="">b 내용</div>

<!-- 일치 -->
<h4 href="" name="하보니">c 내용</h4>

[속성 = "값"] 선택자

이 선택자는 속성과 값이 정확히 일치하는 요소가 대상입니다.

<style>
/* type 속성이 button 인 input 요소 */
input[type="button"] {
  background: red;
}

/* target 속성의 값이 _blank 인 요소 */
[target="_blank"] {
  background: blue;
}

/* div 태그에 title 속성의 값이 a 인 요소 */
div[title="a"] {
  background: yellow;
}
</style>

<!-- 일치 -->
<input type="button" value="하보니">

<!-- 일치 -->
<a target="_blank">a 내용</a>

<!-- a 값만 갖고 있지 않아서 불일치 -->
<div title="a b">b 내용</div>

[속성 ~=“값”] 선택자

속성의 값을 포함하는 요소를 찾습니다. 여러 값 중에서 해당 값이 포함된 요소에 적용합니다. 단어 기준입니다.

<style>
/* class 속성에 user 값을 포함하는 요소 */
[class ~= "user"] {
  background: yellow;
}
</style>

<!-- 일치 -->
<div class="container user">a 내용</div>

<!-- 단어 기준 user 가 아니므로 불일치 -->
<div class="user-fiter nav fot">b 내용</div>

<!-- 일치 -->
<a href="#" class="seleter user name">c 내용</a>

[속성 |= “a”] 선택자

a 값과 일치하거나 a 다음에 하이픈(-)으로 시작하는 요소, "a-" 를 대상으로 합니다.

<style>
/* title 속성의 값이 a 인 요소 */
[title |= "a"] {
  background: red;
}
</style>

<!-- abc는 단어가 아니어서 불일치 -->
<h4 title="abc">a 내용</h4>

<!-- 하이픈(-)를 포함하는 단어이므로 일치 -->
<h4 title="a-name">b 내용</h4>

<!-- a 값만 갖고 있지 않아서 불일치 -->
<h4 title="a name">c 내용</h4>

[속성 ^= “a”] 선택자

a 로 시작하는 문자를 찾습니다.

<style>
/* a 로 시작하는 문자를 찾음 */
a[name ^= "a"] {
  background: red; 
}
</style>

<!-- a 로 시작하는 값이므로 일치 -->
<a name="abc">a 내용</a>

<!-- b 로 시작하는 값이므로 불일치 -->
<a name="bac">b 내용</a>

<style>
[name ^= "eng"] {
  background: yellow;
}
</style>

<!-- eng로 시작하므로 일치 -->
<h4 name="english">a 내용</h4>

<!-- 일치 -->
<h4 name="eng-hood">b 내용</h4>

<!-- eng로 시작하는 문자가 아니므로 불일치 -->
<h4 name="useeng">c 내용</h4>

[속성 $= “a”] 선택자

a 로 끝나는 문자를 찾습니다.

<style>
/* abc로 끝나는 문자를 찾음 */
h4[title $= "abc"] {
  background: red;
}
</style>

<!-- abc로 끝나는 문자이므로 일치 -->
<h4 title="xyz-abc">a 내용</h4>

<style>
[title $= ".xml"] {
  background: red;
}
</style>

<!-- .xml로 끝나는 문자이므로 일치 -->
<h4 title="abdcefg.xml">XML 내용</h4>

[속성 *= “a”] 선택자

어느 위치에 있든 그 값을 포함하면 적용합니다.

<style>
/* abc 를 포함하는 문자를 찾음 */
[name *= "abc"] {
  background: red;
}
</style>

<!-- 일치 -->
<h4 name="abcdefg">a 내용</h4>

<!-- 일치 -->
<h4 name="http://habonyphp.com/abc.php">b 내용</h4>