CSS3 선택자 - 속성 선택자

[속성] - 지정한 속성에 스타일을 적용한다. 이 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용한다. '[ ]' 사이에 찾으려는 속성을 지정하면 된다. 아래의 예시는 a태그 중 href속성을 가진 요소에 배경색을 지정하는 것이다.

a[href] {
	background: yellow;
}

 

[속성 = 값] - 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용할 수 있다. 아래 예시는 스타일을 target속성과 target속성값이 blank인 모든 태그에 적용시킨다. 

[target="blank"] { }

 

[속성 ~= 값] - 여러 값 중 특정 값이 포함된 속성에 스타일을 적용한다. 아래의 선택자는 class속성에서 button을 포함한 태그에 스타일을 적용한다. 예를 들어 class="button" 혹은 class="flat button"을 가진 태그에 스타일을 적용한다.

[class ~= "button] {
	border : 2px solid black;
}

 

[속성 |= 값 ] - [속성 ~= 값]과 달리 '-'으로 연결한 단어에도 스타일을 적용한다. 지정한 값이거나 '값-'으로 시작하는 속성값에 스타일을 적용한다. [title |="us"] 선택자는 'title="us"' 또는 'title="us-english"' 속성을 가진 태그에 스타일을 적용시킬 수 있다.

 

 

[속성 ^= 값] - 지정한 값으로 시작하는 속성에 스타일을 적용한다. [title ^= "eng"]인 선택자는 'title="english"'속성을 가진 태그에 스타일을 적용한다. 

 

[속성 $= 값] - 지정 값으로 끝나는 속성에 스타일을 적용한다. 특정 확장자(.hwp, .gif 등)를 가진 속성값에 스타일을 줄 때 유용하다.

 

[속성 *= 값] - 값의 일부가 일치하는 속성에 스타일을 적용한다. [href *= "w3"] 선택자는 href속성 값에서 w3라는 문자열이 포함되어 있으면 스타일이 적용된다.

 

속성과 속성값은 태그가 포함한 속성이 아니더라도, 즉 사용자가 임의로 이름지은 속성과 속성값에도 적용시킬 수 있다.