얼라아답터를 위한 CSS4 셀렉터 정리해주겠다.

CSS4 관심가져있는 것들이 안보이길래 내가 정리해주겠다.

원문? 걍 여기로 가 – http://css4-selectors.com/

아, 참고로 어느 브라우저도 지원 안되니 테스트는 참기 바란다.

선택자 정의만 있다.

1. 부정 가상 선택자

:not(negation-selector1[, negation-selector2,])

일단 CSS3 에서도 부정선택자를 정의할 수 있으나, 안타깝게도 현재 여러개를 지원하지 않는다.

하지만 이번 CSS4 정의에서는 여러 선택자를 넣을 수 있다. (하지만 :not(:not(…)) 이런 식은 안된다.)

2. 매치 가상 선택자

:matches(selector1[, selector2,])

이것도 나름 혁신적인데, 매치된 선택자들을 집합하여 여기에 추가 선택자를 받아낼 수 있다.

예를 들면, 현재 layer 클래스가 #a, #b에 있는데, 기존대로 하면은 이렇게 정의해야 한다.

#a .layer, #b .layer{

    background:yellow;

하지만 이걸 매치 선택자로 대체하면 이렇게 할 수 있다는 거다.

:matches(#a, #b) .layer{

    background:yellow;

욜라 간단하지 아니한가?

현재 불여우와 크롬에서 대체 선택자를 지원하는데, any 선택자가 그 동일한 역할을 한다.

/* 현재 동작중. 주의: 불여우와 크롬은 각기 다른 접두어를 정의해야 한다. :-prefix-any */
:-moz-any(section, article, aside) h1,
:-webkit-any(section, article, aside) h1{
    color: red;
}

3. 내부 링크 가상 선택자

:local-link(n)

얜 뭐냐.. 얘는 주소의 흔히 말하는 뎁스(Depth), 폴더의 구조 깊이에 따라 반응할 수 있는 선택자 되겠다.

링크 주소는 href 로 이동거나 action 링크 등이 먹힌다.

/* 이렇게 http://example.com/ 같은 최상위 링크만 적용된다. */ :local-link(0) { color: red; }   /* 이렇게 http://example.com/year/ 같은 1뎁스 경로 링크만 적용된다. */ :local-link(1) { color: red; }   /* 이렇게 match http://example.com/year/month/ 같은 2뎁스 경로 링크만 적용된다. */ :local-link(2) { color: red; }

주로 홈페이지에 흔이 쓰는 상단 네비게이션 부분, 예를들면

홈 > 회사소개 > 연혁

이런 녀석의 용도에 알맞을 듯 하다.

4. 시간 흐름 가상 선택자

/* 현재 위치 */
:current { /* declarations */ }
:current(s1[, s2,]) { /* declarations */ }
 
 
/* 이전 위치 */
:past { /* declarations */ }
:past(s1[, s2,]) { /* declarations */ }
 
 
/* 다음 위치 */
:future { /* declarations */ }
:future(s1[, s2,]) { /* declarations */ }

이건 웹 접근성을 위한 선택자인 듯 하다. 주로 <video> 태그의 자막으로 쓸 거라고 하는데. 여기가 일단 주 용도이기도 하지만, 청각 장애인 웹 접근성에 대한 시각적 도움을 줄 것으로 보이는 선택자가 되겠다.

:current(p, span) {
    background-color: yellow;
}
 
:past(p, span),
:future(p, span) {
    background-color: gray;
}

이런 식으로 현재 표시되는 자막에는 노란색 배경을, 이미 지나거나 곧 표시될 자막 부분에는 회색 배경을 붙이는 예제가 되겠다.

5. 미확정 가상 선택자

:indeterminate

HTML5 의 checkbox 및 radio 에서 체크, 비체크 에서 미확정 상태를 표시할 수 있는데, 이를 위한 가상 선택자가 되겠다.

미확정 체크 박스를 만드는 방법은 일단 순수 HTML 으로는 불가능하고, 스크립트로 활성화해야 한다.

checkbox.indeterminate = true;

이렇게 하면 미확정 상태가 되는데, 이건 체크한것도 안한것도 아닌 상태가 된다. 그냥 보여주기일 뿐이라고. 폼전송도 안되고.

미확정 선택자는 표준이 아니었으나, IE는 9 이상 지원하고 나머지 브라우저가 모두 지원하는 선택자이다.

6. 기본값 가상 선택자

:default

<select> 태그나 <button> 태그 등의 기본값으로 적용될 요소에 한해 적용되는 선택자가 되겠다.

:default {
    background-color: gray;
}

이렇게 하면 <select> 에 기본으로 선택된 값 부분의 배경이 회색으로 변할 것이다. 물론 클릭해보고 다른 값을 선택하는 동안 봐라.

불여우와 크롬, 사파리가 지원된다.

7. 유효값 가상 선택자

:in-range {
    /* declarations */
}
 
:out-of-range {
    /* declarations */
}

이녀석은 두가지 선택자로 정의되어 있는데, 올바른 값에 대한 정의를 나타내는 in-range 와 올바르지 않은 값 정의를 나타낸 out-of-range 가 있다.

주로 input type=”range” 에서 min=”1″ max=”10″ 인데 value=”11″ 같이 범위를 넘어버리면 :out-of-range 선택자가 동작한다. 물론 아니면 in-range 선택자가 동작한다.

:in-range {
    opacity: 1.0;
}
 
:out-of-range {
    opacity: 0.6;
}

이렇게 하면 올바른 값을 선택한 요소는 불투명하게, 올바르지 않은 값을 선택한 요소에게는 약간의 투명 효과를 줄 수 있다.

현재 크롬과 오페라만 된다.

8. 선택 입력 가상 선택자

:required {
    /* declarations */
}
 
:optional {
    /* declarations */
}

필수 입력란과 선택 입력란에 대한 가상 선택자라고 보면 되는데, 일단 input 태그에 required 속성 들어가면 required 선택자가 동작을 할 것이고 나머지는 optional 가상 선택자가 동작할 것이다. 쉽지?

:required {
    border: 1px solid red;
}
 
:optional {
    border: 1px solid gray;
}

이런 식으로 필수 입력란에는 빨간 테두리를, 선택 입력란에는 회색 테두리를 입힐 수 있다.

현재 IE 빼고 모든 브라우저가 지원된다.

9. 편집 여부 가상 선택자

:read-only {
    /* declarations */
}
 
:read-write {
    /* declarations */
}

이녀석은 편집 가능하거나 아닌 것에 대한 가상 선택자다. 당연히 입력란을 위한 선택자 되겠다.

readonly 속성이 있다면 read-only 선택자가 동작할 것이고, 없다면 read-write 선택자가 동작할 것이다.

contenteditable 속성도 영향을 받는다. 속성을 주면 당연히 read-write 선택자가 동작한다.

:read-only {
    font-family: Verdana, Arial, sans-serif;
}
 
:read-write {
    font-family: Trebuchet MS, Times New Roman, sans-serif;
    border: 1px dotted gray;
}

이렇게 하면 편집 가능한 요소에 회색 점테두리를 입히고, 편집 안되는 요소에는 그냥 글꼴만 정의하고 땡.

10. 구조 가상 선택자

:nth-match(an+b) {
    /* declarations */
}
 
:nth-last-match(an+b) {
    /* declarations */
}

언뜻 보면 CSS3 의 nth-child 선택자 삘 나보이는데, nth-child 는 그냥 범위 내 같은 계층 속만 찾는다면, nth-match 는 하위 계층까지 찾아 선택된다.

p:nth-match(2n+1) {
    background-color: yellow;
}
 
p:nth-last-match(2n+1) {
    background-color: green;
}

이렇게 하면 p 태그의 첫번째 매치된 녀석은 노란 배경을, 문서 맨 뒤에 2번째 매치된 p 태그에겐 초록색 배경을 줄 것이다.

아직 지원되는 브라우저는 없다.

10. 그리드 구조 가상 선택자

:column(s1) { /* declarations */ }
 
:nth-column(an+b) { /* declarations */ }
 
:nth-last-column(an+b) { /* declarations */ }

자.. 이것은 표 또는 CSS3 의 grid 속성을 부여받거나, display:table-cell 등의 셀 속성을 부여받은 요소에 적용할 수 있는 선택자 되겠다. 조금 쓰기가 어려운데, 예제를 통해 이해시켜 주겠다.

<table>
    <col />
    <col class="highlight" />
    <col />
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td>J</td>
        <td>K</td>
    </tr>
    <tr>
        <td>L</td>
        <td>M</td>
        <td>N</td>
    </tr>
    <tr>
        <td>O</td>
        <td>P</td>
        <td>Q</td>
    </tr>
</table>

:column(.highlight) {
    background-color: yellow;
}
 
:nth-column(2n+1) {
    background-color: gray;
}
 
:nth-last-column(3n+1) {
    background-color: green;
}

이렇게 하면, 첫번째로 .highlight 클래스명이 붙은 두번째 열은 전부 노란색이 되겠다.

그리고 첫번째 열은 회색 배경이 되겠고,

마지막 에서 3번째 중 하나, 즉, 마지막 열이 초록색 배경을 입힐 것이다.

아직 지원되는 브라우저는 없다.

11. 속성 대소문자 무시 선택자

[attribute="value" i]

CSS2 의 속성 선택자는 대소문자가 구분됐다. 그래서 아무리 똑같은 값을 부여받았다 해도, value=”abc” 와 value=”aBc” 는 전혀 다르게 인식됐다.

하지만 다음에 나올 CSS4 에서는 속성값의 대소문자를 철저히 무시해주는 옵션을 제공할 것이다.

a[href$="pdf" i] {
    color: red;
}

이렇게 하면, 링크 주소 끝이 pdf 던, PDF 던, pDf 던 대소문자 구분없이 pdf 로 끝나는 모든 링크 요소 글색깔이 빨간색으로 변할 것이다.

아직 지원되는 브라우저는 없다.

12. 속성 참조 선택자

E /attribute/ F

선택자 중 아마 유일한 변수성 선택자가 아닐까 싶다. 속성값은 변하기 때문에.

어쨌든, E 선택자의 /속성/ 값을 ID 로 참조한 후, 속성 값 ID에 매치되는 F 선택자에 대한 스타일을 입힐 수 있다.

다소 복잡하다. 의미가. 예를 들면,

label:hover /for/ input {
    border: 1px solid red;
}

이렇게 하면 label 에 마우스를 갖다댔을 때, input 요소 id 속성이 label 의 for 속성에 매치될 경우, 빨간 테두리를 줄 것이다.

아직 지원되는 브라우저가 없다.

13. 자식 반전 선택자 (subject of a selector with child combinator)

!subject > selector {
    /* declarations */
}

드디어 올 것이 왔다. 말로만 듣던 부모 선택자가 바로 이 ! 로 시작하는 선택자가 되겠다.

subject 에서 selector 를 찾은 후 매치되는 요소에 한해 selector 가 아닌 subject 요소에게 스타일을 주는 선택자다.

즉 부모 선택자가 되겠다.

!ul > li {
    border: 1px solid green;
}

이렇게 하면 ul 바로 아래 li 요소에 초록 테두리를 주는게 아니라 li 자식을 가진 ul 요소에다가 초록색 테두리를 입힌다.

안타깝게도 아직 지원되는 브라우저는 없다.

14. 하이퍼링크 가상 선택자

:any-link

간단히 말하면 링크 주소 가진 모든 요소들을 가리킨다. a 태그던 form 태그던 area 태그던 링크 가지면 죄다 적용받는다.

:any-link {
    background-color: blue;
}

이렇게 하면 링크 가진 모든 요소의 배경은 파란색으로 변한다.

내부링크 가상선택자는 같은 도메인 주소를 받는 대신 경로 뎁스 등의 미세한 옵션이 제공되지만, 이 선택자는 모든 도메인을 수용하는 대신 추가 옵션 따위 없다.

이제 CSS4 사용할 준비 되었는가 제군들이여?

<

p>

오역 및 개선방안 제안은 환영한다 제군들이여!

바로잡는다!

정확히는 CSS Selector 4 정의라고 한다. CSS의 새로운 버전 4가 아니라고 한다.

또한 Working Draft 상태라서 언제든지 바뀌거나 삭제될 수 있으므로,

이 점 유의해 가면서 알아두길 바란다. 만약 바뀌는 부분이 있다면 제보 바란다. 또는 필자가 발견하는데로 업데이트 하겠다.

composite / 2013년 12월 24일 / 미분류
태그:, ,

Comments

  1. css4 - 2013년 12월 24일 @ 8:29 오전

    번역해주셔서 감사합니다 !

    Reply

답글 남기기

Your email address will not be published / Required fields are marked *