CSS셀렉터 정리(2)

이번 포스팅에서는 유사 클래스를 중심으로 정리한다. 유사 클래스는 CSS3에서 큰폭으로 확장되었기에 처음 보는 것도 많을테고 아직 지원하는 브라우저가 많지 않지만 알아두면 좋을 것 같다.

※加藤善規(카토 요시키)씨의 CSS セレクタに関するおさらい 2 | WWW WATCH를 번역한 내용입니다.

유사 클래스(Structural pseudo-classes)

E:root

문서 안의 루트요소인 E라는 요소에 스타일을 적용한다. CSS3에 정의. (X)HTML에 대해서 루트요소는 HTML요소이므로

:root {
margin:0;
padding:0;
}

라고 지정하면 HTML요소에 스타일이 적용된다. XML의 경우에는 DTD로 지정한 루트 요소에 적용된다.

E:nth-child(n)

E라고 하는 요소 중에서 부모요소의 n번째의 자식요소인 E요소에 스타일을 적용한다. CSS3에 정의되어 있다.

div p:nth-child(3) {
margin:0;
padding:0;
}

div요소 안에서 3번째 자식요소로 출현하는 p요소에만 스타일이 적용된다. 또

div p:nth-child(odd) {
margin:0;
padding:0;
}

라고 하면 홀수로 출현하는 요소(첫번째, 세번째, 다섯번째…)에만 적용할 수 있고 동일하게 even을 n에 넣어서 짝수로 출현하는 요소에만 스타일을 적용 할 수 있다.

그 밖에도 an+b라는 형식도 가능하다. a와 b에 정수를 넣으면 n에는 0부터 차례대로 정수를 대입하여 계산한다. 즉, 2n+1이면 홀수(odd)와 같고 2ｎ+0이면 짝수(even)와 같다. 덧붙여 +0은 생략 할 수 있으므로 2n이라고 기술한다.

div p:nth-child(odd) /* div안에 홀수로 출현하는 자식요소인 p요소에 적용 */
div p:nth-child(2n+1) /* 위와 같다 */
div p:nth-child(even) /* div안에 짝수로 출현하는 자식요소인 p요소에 적용 */
div p:nth-child(2n) /* 위와 같다 */
/* 아래와 같이 적으면 4가시 색이 순서대로 반복된다 */
div p:nth-child(4n+1) { color:navy;}
div p:nth-child(4n+2) { color:green;}
div p:nth-child(4n+3) { color:maroon;}
div p:nth-child(4n+4) { color:purple;}

이 방법은 아래의 유사클래스에 등장하는 n에도 동일하게 사용 할 수 있다.

E:nth-last-child(n)

E라고 하는 요소 중에서 부모요소의 마지막부터 세어서 n번째의 자식요소인 E요소에 스타일을 적용한다. CSS3에 정의되어 있다.

div p:nth-last-child(1) {
margin:0;
padding:0;
}

라고 하면 div요소 안에서 가장 마지막에 출현하는 자식요소인 p요소에만 스타일이 적용된다.

E:nth-of-type(n)

E라고 하는 요소 중에서 부모요소 안에서 동렬(형제관계)인 E와 같은 이름을 가진 요소로 n번째에 출현하는 E요소에만 스타일을 지정한다. CSS3에 정의되어 있다.

div p:nth-of-type(5) {
margin:0;
padding:0;
}

라고 하면 div요소 안에서 형제관계에 있는 p요소 중에서 5번째에 출현하는 p요소에만 스타일을 적용한다.

E:nth-last-of-type(n)

E라고 하는 요소 중에서 부모요소 안에서 동렬(형제관계)인 E와 같은 이름을 가진 요소로 끝에서부터 n번째에 출현하는 E요소에만 스타일을 지정한다. CSS3에 정의되어 있다.

div p:nth-last-of-type(3) {
margin:0;
padding:0;
}

라고 하면 div요소 안에서 형제관계에 있는 p요소 중에서 끝에서 3번째에 출현하는 p요소에만 스타일을 적용한다.

E:first-child

E라고 하는 요소 중에서 부모요소에 처음으로 출현하는 자식요소인 E요소에 스타일을 적용한다. CSS2에 정의되어 있다.

div p:first-child {
margin:0;
padding:0;
}

E:last-child

E라고 하는 요소 중에서 부모요소에 마지막으로 출현하는 자식요소인 E요소에 스타일을 적용한다. CSS3에 정의되어 있다.

div p:last-child {
margin:0;
padding:0;
}

E:first-of-type

E라고 하는 요소 중에서 부모요소 안에서 동렬(형제관계)의 E와 같은 이름을 가지고 있는 요소로 최초로 출현하는 E요소에 스타일을 적용한다. CSS3에 정의되어 있다.

div p:first-of-type {
margin:0;
padding:0;
}

라고 하면 div요소 안에서 형제관계에 있는 p요소 중에서 최초로 출현하는 p요소에만 스타일을 적용한다.

E:last-of-type
E라고 하는 요소 중에서 부모요소 안에서 동렬(형제관계)의 E와 같은 이름을 가지고 있는 요소로 마지막에 출현하는 E요소에 스타일을 적용한다. CSS3에 정의되어 있다.

div p:last-of-type {
margin:0;
padding:0;
}

라고 하면 div요소 안에서 형제관계에 있는 p요소 중에서 가장 나중에 출현하는 p요소에만 스타일을 적용한다.

E:only-child

E라고 하는 요소 중에서 부모요소 안에서 유일한 자식요소인(형제를 가지지 않는다) E요소에 스타일을 적용한다. CSS3에 정의되어 있다.

E:only-of-type

E라고 하는 요소 중에서 부모요소 안에서 유일한 E요소에 스타일을 지정한다. CSS3에 정의되어 있다.

E:empty

E라고 하는 요소 중에서 자식요소(텍스트 노드도 포함해서)를 전혀 가지고 있지 않은 E요소에만 스타일을 적용한다. CSS3에 정의되어 있다.

링크 유사클래스(The link pseudo-classes)

E:link
E:visited

문서안의 하이퍼 링크 중에서 유저가 아직 방문하지 않은 링크인가(:link), 또는 방문을 한 링크인가(:visited)에 따라 각각의 스타일을 적용한다. CSS1부터 존재한다.

유저 액션 유사클래스(The user action pseudo-classes)

E:active
E:hover
E:focus

유저의 조작에 따라 스타일을 적용한다. :active는 유저에 의해서 대상 요소가 액티브하게 되었을 때. 예를 들어 마우스로 클릭하고 버튼에서 손을 땠을때 적용된다. :hover는 유저에 의해서 대상 요소가 가리켜지고 있을 때. 롤 오버 등. 이 두가지는 CSS1부터 존재. :focus는 대상 요소가 포커스 되었을때 스타일이 적용된다. 예를 들면 입력 대기가 되어 있는 input요소 등. :focus는 CSS2에 정의되어 있다.

타겟 유사클래스 (The target pseudo-class)

E:target

하이퍼링크 중에서 URI에 앵커링크가 지정되어 있는 링크를 액티브하게 했을 때 그 타겟이 되는 요소에 스타일을 적용한다. 앵커링크란

http://example.com/example.html#section_3

와 같이 fragment식별자로 URI가 끝나는 링크이다.

*:target {
padding-right:15px;
background:(image/target-icon.png) no-repeat right center;
}

이것으로 fragment식별자 링크를 클릭했을 때 그 타겟 요소에 아이콘을 표시하는 것이 가능하다. fragment식별자 링크로 이동할때 어디를 타겟으로 이동했는지를 알기쉽게 하는 등의 용도로 사용 할 수 있다. CSS3에 정의되어 있다.

언어 유사클래스(The :lang() pseudo-class)

E:lang(fr)

E라고 하는 요소 중에서 앞부분이 fr과 일치하는 lang속성값을 가진 요소에 스타일을 적용한다. CSS2에 정의되어 있다.

p:lang(en) {
padding-right:15px;
background:(image/en-icon.png) no-repeat right center;
}

라고 지정하면

english text

라고 기술한 p요소에만 스타일을 적용한다.

UI 요소 상태 유사클래스 (The UI element states pseudo-classes)

E:enabled
E:disabled

E라고 하는 요소 중에서 유효한 것(:enabled), 무효한 것(:disabled)에 대해서 각각 스타일을 지정한다. 예를 들면 textarea요소 등은 통상 포커스입력이 가능(액티브)하기 때문에 유효한 요소이고 약관 등의 표시로 유저가 포커스해도 입력 할 수 없는 textarea는 무효한 것이 된다. CSS3에 정의되어 있다.

E:checked

라디오버튼, 체크박스가 체크된 상태의 스타일을 지정한다. CSS3에 정의되어 있다.

번역이 어색하거나 이해하기 힘든 부분이 있으면 코멘트 부탁드립니다.