속성 선택자

설명
CSS Level
CSS 2, CSS 3

[att]

해당 속성이 정의된 모든 요소를 선택합니다. 속성의 값과는 무관합니다.
span[class="example"]
span[hello="Cleveland"][goodbye="Columbus"]

[att=val]

해당 속성이 정의되고 그 값이 해당 값과 동일한 요소들을 선택합니다.
p[color="red"] {...}
p[text-align="center"] {...}

[att~=val]

해당 속성이 정의되고, 공백으로 구분된 값의 목록중 하나가 주어진 값과 동일한 요소들을 선택합니다.
a[rel~="copyright"] { ... }

[att|=val]

해당 속성이 정의되고 그 값이 해당 값과 동일하거나, 또는 주어진 값으로 시작하고 '-' 기호로 이어지는 값인 요소들을 선택합니다.
a[hreflang|="en"] {...}


[att^=val]

해당 속성의 값이 주어진 값으로 시작하는 요소들을 선택합니다. CSS 3.
object[type^="image/"] {...}

[att$=val]

해당 속성의 값이 주어진 값으로 끝나는 요소들을 선택합니다. CSS 3.
a[href$=".html"] {...}

[att*=val]

해당 속성의 값이 주어진 값을 부분 문자열로 가지는 요소들을 선택합니다. CSS 3.
p[title*="hello"] {...}

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.