3.1.3.1. 구조적 의사(가상)클래스(Structural pseudo-class)
요약 설명CSS Level 3 선택자
구조 의사 클래스를 사용하면 HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있습니다.
:root
문서의 root 요소(최상위 요소 html)를 선택합니다.
:empty
아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
엘리먼트 내에 스페이스 빈 공간이라도 있다면 그 요소는 비어있는 요소가 아니기 때문에 선택할 수 없습니다.
:last-child
모든 자식(child) 요소 중에서 요소 유형(타입)에 상관없이 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type
모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택합니다.
컨테이너 안에서 특정 유형(타입)의 요소에서 첫 번째를 찾습니다.
예를 들어서 p:first-of-type은 부모의 첫 번째 자식이든 아니든 상관하지 않고 첫 번째 <p> 요소를 선택하게 됩니다.
:last-of-type
모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택합니다.
:first-of-type과 정확하게 동일하지만 컨테이너의 특정 유형(타입)의 요소에서 마지막을 찾습니다.
:only-child
자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택합니다.
만약 컨테이너에서 자식이 하나라면 그 요소를 선택하게 됩니다.
:only-of-type
자식(child) 요소 중 동일한 유형의 형제가 없는 요소를 선택합니다.
:only-child와 마찬가지입니다. 단지 해당 요소가 컨테이너에서 그 유형(타입)에서 유일한 하나라면 그 요소를 선택합니다.
예를 들어서 <div>가 하나의 <h1>과 하나의 <p>를 포함하고 있다면
이들 각각은 해당 유형(타입)이 유일한 요소일 것입니다.
:nth-child(n)
모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택합니다.
n번째 자식 의사(가상) 클래스는 정수와 표현식뿐만 아니라 두 개의 짧은 키워드(odd:홀수, even:짝수) 중 하나를 선택할 수도 있습니다.
n번째 자식 의사(가상) 클래스는 지금까지 사용했던 양수뿐만 아니라 음수도 사용할 수도 있습니다.
n은 0부터 시작하는 정수입니다.
0과 음수는 생략되기 때문에 2n+1과 2n-1, 3n-2와 3n+1은 결과적으로 같은 수열을 생성합니다.
:nth-child 사용은 해당 요소를 필요에 따라 적절하게 사용하여 활용도가 높은 의사(가상) 클래스입니다.
다만 복잡한 페이지 선택의 경우 HTML에서 혼란스러운 :nth-child 표현식 보다 클래스를 직접 사용 하는 것이 좋습니다.
-
:nth-child(odd)odd 키워드홀수(odd number) 인 요소 선택 (1, 3, 5 ...)
:nth-child(2n+1) 과 동일
-
:nth-child(even)even 키워드짝수(even number) 인 요소 선택 (2, 4, 6 ...)
:nth-child(2n) 과 동일
-
:nth-child(An+B)기능표기법(A x n) + B일련의 형제의 숫자 위치가 An+B모든 양의 정수 또는 0의 값에 대해 패턴과 일치하는 요소(n)를 나타냅니다.
(-1 x n) + 2 (-n+2 로도 표현할 수 있다)
(-1 x 0) + 2 = 2 (두 번째 자식이 선택된다)
(-1 x 1) + 2 = 1 (첫 번째 자식이 선택된다)
(-1 x 2) + 2 = 0 (선택없음):nth-child(3n + 3)3n은 "3xn"이고 전체 표현은 "(3xn) + 3"입니다. 0과 양의 정수로 대체하면 다음과 같습니다.
(3 x 0) + 3 = 3 = 3 번째 Element
(3 x 1) + 3 = 6 = 6 번째 Element
(3 x 2) + 3 = 9 = 9 번째 Element:nth-child(3n + 3)"3n + 3" 대신 "3n + 0" 또는 더 간단한 "3n"을 사용하여 대체하면 다음과 같습니다.
(3 x 0) = 0 = 일치하지 않음
(3 x 1) = 3 = 3 번째 요소
(3 x 2) = 6 = 6 번째 요소
(3 x 3) = 9 = 9 번째 요소:nth-child(2n+1)(2 x 0) + 1 = 1 = 1 번째 Element
(2 x 1) + 1 = 3 = 3 번째 Element
(2 x 2) + 1 = 5 = 5 번째 Element:nth-child(4n-1)음수 n 값을 사용하고 표현식에서 빼기를 사용할 수 있습니다. 예를 들어, 4n-1
(4 x 0)-1 = -1 = 일치하지 않음
(4 x 1)-1 = 3 = 3 번째 요소
(4 x 2)-1 = 7 = 7 번째 요소"-n"값을 사용하면 약간 이상하게 보일 수 있습니다. 최종 결과가 음수이면 일치하는 것이 없으므로 식을 다시 추가하여 다시 양수로 만들어야합니다.
:nth-child(-n + 3)"-n + 3"으로 "first n elements"를 선택할 때 사용할 수 있습니다.
-0 + 3 = 3 = 3 번째 요소
-1 + 3 = 2 = 2 번째 요소
-2 + 3 = 1 = 1 번째 요소
-3 + 3 = 0 = 일치하지 않음
- n
- 2n+1
- 4n+1
- 4n+4
- 4n
- 5n-2
- -n+3
-
0
1
1
4
-
-
3
-
1
3
5
8
4
3
2
-
2
5
9
12
8
8
1
-
3
7
13
16
12
13
-
-
4
9
17
20
16
18
-
-
5
11
21
24
20
23
-
- n
- 2n+1
- 2n-1
- 3n-2
- 3n+1
- -n+5
-
0
1
-1
-2
1
5
-
1
3
1
1
4
4
-
2
5
3
4
7
3
-
3
7
5
7
10
2
-
4
9
7
10
13
1
-
5
11
9
13
16
0
nth-child 예제1
nth-child 예제2
:nth-last-child(n)
모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택합니다.
:nth-of-type(n)
모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택합니다.
:nth-child와 마찬가지로 모든 선택자 속성을 사용할 수 있습니다.
:nth-child와 차이점은 모든 속성이 아닌 선택한 요소 중에서 선택 합니다.
:nth-last-of-type(n)
모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택합니다.