HTML5+CSS3 - 스타일시트 속성 선택자

태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정하는게 속성 선택자이다.

[속성] 형식

지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용한다.

태그명 [속성] {

  속성:속성값;

  ...

}

[속성=값] 형식

주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용한다.

속성값이 공백으로 구분되어 있는 요소도 적용 가능하다.

[속성 = 값] {

  속성:속성값;

  ...

}

[속성 ~= 값] 형식

지정한 값과 속성값이 정확히 일치하지 않아도, 해당 속성값에 지정한 값이 포함만 되어 있으면 스타일을 적용한다.

속성값이 공백으로 구분되지 않아도, 적용 가능하다.

[속성 ~= 값] {

  속성:속성값;

  ...

}

[속성 ^= 값] 형식

지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용한다.

링크 등에 자주 사용한다.

a [href ^= "http://"] { ... }

[속성 ^= 값] {

  속성:속성값;

  ...

}

[속성 $= 값] 형식

지정한 문자로 끝나는 속성 값에 대해서만 스타일을 적용한다.

역시 링크등에 자주 사용한다. 링크 마지막의 파일 확장명 등에 사용.

[속성 $= 값] {

  속성:속성값;

  ...

}

 

[속성 |= 값] 형식

속성이 지정한 값으로 시작하면 스타일을 적용한다.

^= 형식과 비슷해 보이지만, ^= 형식은 해당 지정값으로 시작만 하면 되지만, 이 선택자는 지정한 값과 정확히 한단어로 일치하거나, - 기호로 연결된 경우 적용된다.

[속성 |= 값] {

  속성:속성값;

  ...

}

[속성 *= 값] 형식

지정한 값이 앞, 뒤, 중간, 어디에든 포함만 되어 있으면 적용된다.

[속성 *= 값] {

  속성:속성값;

  ...

}