CSS 속성 선택자

 

 

속성 선택자의 종류

속성 선택자	설명
[attribute]	해당 속성(attribute)을 가진 요소를 선택합니다.
[attribute="value"]	해당 속성을 가지며, 그 값이 value인 요소를 선택합니다.
[attribute~="value"]	해당 속성을 갖고, 그 값중에 value가 포함되는 요소를 선택합니다.
[attribute|="value"]	해당 속성을 갖고, 그 값이 value이거나 value-로 시작하는 요소를 선택합니다.
[attribute^="value"]	해당 속성을 갖고, 그 값이 value로 시작하는 요소를 선택합니다. 위의 속성 선택자와 차이점은 value-로 시작하는게아니라, value로 시작한다는 점입니다.
[attribute$="value"]	해당 속성을 갖고, 그 값이 value로 끝나는 요소를 선택합니다.
[attribute*="value"]	해당 속성을 갖고, 그 값이 value를 포함하기만 하면 모두 선택합니다.

 

속성 선택자의 예시

 

1) [attribute~="value"] : value가 포함되는 요소 선택

[attribute~=”value”]

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

apple이라는 class를 가진 요소를 선택한다.

※ 여러개의 class가 함께 지정되어 있어도, apple을 가졌다면 선택한다.

= <div class="apple">layer</div> 선택함

= <div class="pine apple">layer</div> 선택함

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

 

 

2) [attribute|="value"]와 [attribute^="value"]의 차이점

전자는 value-로 시작하는 경우이고, 후자는 value로 시작하는 경우로, 후자가 좀 더 포함범위가 넓습니다.

 

[attribute|=”value”]

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

layer라는 class로 시작하는 요소만 선택하되, 하이픈으로 구분해 더 많은, 더 다양한 요소를 선택할 수 있다.

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

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

minions라는 class로 시작하는 요소를 전부 선택한다.

= <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> 선택하지 않음

 

 

3) [attribute*=value]

 

[attribute*=value]

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

wow라는 class를 가진 모든 요소를 선택한다.

class가 어떻게 조합이 되어도 wow만 완성되면 무조건 선택한다. 와우!

= <div class="wow">layer</div> 선택함

= <div class="wow ohoh">layer</div> 선택함

= <div class="wow-haha">layer</div> 선택함

= <div class="wwwwwow">layer</div> 선택함