기술팁

CSS Selector Level 4

아마도 CSS4에 사용될 CSS 선택자 레벨 4가 한창 초안 작업 중입니다. 이 글을 쓰는 시점에서는 바로 이틀 전인 2011년 10월 10일자로 업데이트된 문서가 최신이었습니다. 이 글에서는 CSS4에서 추가된 선택자와 의미를 살펴볼까 합니다. 또한 이 문서는 CSS 선택자 레벨 4 초안에 변화가 생기는대로 업데이트하도록 하겠습니다.

[adsense]

현재는 지원하는 브라우저가 없으므로 브라우저 지원 항목은 표에 포함시키지 않았지만, 차후 주요 브라우저에서 새로 추가된 선택자를 지원하면 그에 맞추어 문서를 업데이트 하도록 하겠습니다.

CSS 선택자 레벨 4에 추가된 선택자 패턴과 의미
Pattern Meaning
E:not(s1, s2) 선택자 s1 또는 선택자 s2에 일치하지 않는 E 요소
E:matches(s1, s2) 선택자 s1 또는 선택자 s2에 일치하는 E 요소
E[foo="bar" i] foo 속성의 값이 "bar"인 E 요소(대소문자 구분 안함)
E:local-link 링크 대상이 같은 문서에 있는 하이퍼링크
E:local-link(0) 링크 대상이 같은 도메인에 있는 하이퍼링크
E:current 시간 흐름이 있는 요소(자막 등)에서 현재 화면에 보이는 E 요소
E:current(s) 시간 흐름이 있는 요소에서 현재 화면에 보이는 E 요소 중 선택자 s에 일치하는 요소
E:past :current 앞의 E 요소. 문서 언어에서 요소를 시간 순으로 정렬하지 않았다면 :current 요소 바로 앞의 형제 요소
E:futrue :current 뒤의 E 요소. 문서 언어에서 요소를 시간 순으로 정렬하지 않았다면 :current 요소 바로 뒤의 형제 요소
E:interminate 선택한 것도 아니고 선택하지 않은 것도 아닌 중간 단계의 사용자 인터페이스 E 요소
E:default 유사한 UI 요소 중에서 기본으로 사용되는 E 요소. 예를 들면, 여러 버튼 중 전송 버튼을 기본으로 사용하는 것.
E:valid 안에 담긴 콘텐츠가 유효한 E 요소(HTML5 또는 XFORMS 관련)
E:invalid 안에 담긴 콘텐츠가 유효하지 않은 E 요소(HTML5 또는 XFORMS 관련)
E:in-range 안에 담긴 콘텐츠가 설정한 범위 내에 있는 E 요소
E:out-of-range 안에 담긴 콘텐츠가 설정한 범위를 벗어난 E 요소
E:reuqired 반드시 값을 입력해야 하는 E 요소
E:optional 값을 생략할 수 있는 E 요소
E:read-only 사용자가 값을 입력할 수 없는 E 요소
E:read-write 사용자가 값을 입력할 수 있는 E 요소
E:nth-match(n of selector) 주어진 선택자 selector에 일치하는 n번째 형제 노드 E. n에는 숫자, an+b 형태, even, odd도 가능
E:nth-last-match(n of selector) 주어진 선택자 selector에 일치하는 뒤에서 n번째 형제 노드 E
E:column(selector) 테이블이나 그리드에서 선택자에 일치하는 컬럼에 속한 셀
E:nth-column(n) 테이블이나 그리드에서 n번째 컬럼에 속한 셀
E:nth-last-column(n) 테이블이나 그리드에서 뒤에서 n번째 컬럼에 속한 셀
E /foo/ F E 요소의 foo 속성에서 참조한 F 요소. 예를 들어, label의 for 속성에서 참조한 input
?E > F F를 자식 요소로 둔 부모 요소 E

CSS 선택자 레벨 3에 대한 설명은 정찬명님의 글을 참고하세요.

    1. 나도 굉장히 기다렸었지! 부모 요소를 찾는 선택자가 없더라고 -_- jQuery에도 빨리 반영됐음 좋겠다

      Reply

댓글을 남겨주세요

This site uses Akismet to reduce spam. Learn how your comment data is processed.