[CSS] css 속성 선택자

특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다.

 

[attribute]

해당 속성을 가진 태그를 지정.

a[target]{
	color:red;
}
/*a링크 중 target 속성을 가진 태그를 선택*/

[target]{
	color:#fff;
}
/*target 속성을 가진 태그를 선택*/

 

[attribute="value"]

속성명과 속성값이 동시에 일치하는 요소를 선택자로 지정하는 기능.

[class="tomato"]{
	background-color:blue;
}
/*속성명이 class이고, 속성값이 tomato인 요소를 선택자로 지정.*/

p[class="tomato"]{
	background-color:red;
}
/* p 태그 중에서 속성명과 속성값이 일치하는 요소를 선택자로 지정.*/

 

[attribute**~**="value"]

attribute 속성 값이 value를 포함한 요소를 선택한다.

여러개의 속성값이 함께 지정되어 있어도, 해당 속성값을 가졌다면 선택된다.

div[class~="apple"]{
	background-color:red;
}

<div class="apple"></div> 선택!

<div class="pine apple"></div> 선택!

<div class="pine-apple"></div> 선택하지 않음!

 

[attribute|="value"]

attribute 속성값이 value 이거나 value-로 시작하는 요소를 선택한다.

div[class|="layer"]{
	background-color:red;
}

<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]

attribute 속성값이 value로 시작하는 요소를 선택한다.

div[class^="minions"]{
	background-color:red;
}

<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]

attribute 속성의 값이 value로 끝나는 요소를 선택

활용 : .pdf 등을 value로 지정해 특정 파일만 선택하는 것도 가능하다.

div[class$="end"]{
	background-color:red;
}

<div class="end">layer</div> 선택!
<div class="start end">layer</div> 선택!
<div class="ko_end">layer</div> 선택!
<div class="end bye">layer</div> 선택하지 않음!

 

[attribute*=value]

attribute 속성의 값이 value를 포함한 요소를 선택한다.

attribute가 어떻게 조합되어도 해당 value 값만 있으면 무조건 선택한다.

div[class*="wow"]{
	background-color:red;
}

<div class="wow">layer</div> 선택!
<div class="wow ohoh">layer</div> 선택!
<div class="wow-haha">layer</div> 선택!
<div class="wwwwwow">layer</div> 선택!