페이지 내부 링크/ページ内移動リンク



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)와 같고 2n+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에 정의되어 있다.

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

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

2 Responses to “CSS셀렉터 정리(2)”

Comments Feed

  1. 하루에 Says:

    겁나게! 멋진 정보 감사 드립니다. (제 사이트에 링크를 걸지도… -.-a)

    그런데 요소 보다는 엘리먼트라는 발음 그대로가 더 나은 듯 합니다.
    워낙 많이들 써서 그런지 요소는 왠지 컴포넌트랑도 헷갈리고… 그런 느낌이네요.

  2. nmind Says:

    안녕하세요 하루에님 반갑습니다:-)
    링크 감사합니다:-)

    일본에서는 엘리먼트보다 요소라고 많이 사용하고 있습니다. 원문에도 요소라고 사용되어서 일단 요소라고 정리했는데…어떤 단어가 더 적절할지 고민 좀 해볼게요^^

Leave a Reply