[CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 1

 

 

 

이번에는 구조 가상 클래스에 대해서 살펴보도록 하겠습니다. 일단, '구조 가상 클래스'의 정의에 대해서 간단하게라도 살펴봐야 하겠죠? 구조 가상 클래스라 함은, 웹 문서의 전체적인 구조를 기준으로 잡고, 이 안에서 특정한 위치에 있는 요소를 골라서 스타일을 적용하는 가상 클래스 선택자입니다. 

 

여기서 살펴볼 내용이 바로, 위에서 언급한 [특정한 위치]를 정의하는 방식이 되는 것이죠. 

 

 

 

---

 

 

○ 특정 위치의 자식 요소 선택

 

우리는 앞서 살펴본 방식에 따라, class 또는 id를 사용하여 특정한 웹 문서의 요소를 선택하고 스타일을 적용해 왔습니다. 그런데 여러가지 요소가 뒤섞여 여러 개 나열되어 있는 경우에는 요소의 배치 '순서'를 통해서 스타일을 적용할 수 있습니다. 즉, "n번째 요소에만 스타일을 적용해라."라는 형태도 가능한 것이죠.

 

아래 표를 통해서 이러한 구조 가상 클래스의 형태와 유형을 살펴보겠습니다. 

 

NO.	종류	설명
1	:only-child	부모 안에 자식 요소가 하나뿐일 때, 자식 요소를 선택한다.
2	A:only-type-of	부모 안에 A요소가 하나뿐일 때 선택한다.
3	:first-child	부모 안에 있는 모든 요소 중에서, 첫 번째 자식 요소를 선택한다.
4	:last-child	부모 안에 있는 모든 요소 중에서, 마지막 자식 요소를 선택한다.
5	A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다.
6	A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
7	:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
8	:nth-last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
9	A:nth-of-type(n)	부모 안에 있는 A요소 중에서 n번째를 선택한다.
10	A:nth-last-of-type(n)	부모 안에 있는 A요소 중에서 끝에서 n번째를 선택한다.

 

위 구조 가상 클래스 종류 중, 7~8번과 9~10번의 차이가 다소 헷갈릴 수 있습니다. 간단히 설명하면 7~8번은 특정 부모 안의 자식 요소(태그)를 모두 세는 것이고, 9~10번의 경우에는 지정한 요소(태그)의 개수만을 세는 것입니다. 이를테면, p:nth-of-type(3)이라고 지정했다면, 해당 부모 요소 내에 작성된 자식 요소들 중 p의 개수만 세고 그 중 세 번째 요소에만 스타일을 적용한다는 의미가 됩니다. 아래 예제를 통해서 더 살펴보겠습니다. 

 

.contents :nth-child(3) {
    background-color:#ffff00;
}

.contents p:nth-of-type(3) {
    background-color:#00b900;
}

 

위와 같이 7번을 적용한 케이스와 9번을 적용한 케이스를 CSS로 작성했습니다. 그럼 class가 contents인 div가 있다고 아래와 같이 가정해 보겠습니다. 

 

<div class="contents">
    <h2>본문 예제</h2>
    <p>Excepteur do est eiusmod nulla et veniam. Labore officia officia ex aliqua exercitation aliqua laborum Lorem deserunt ut ullamco labore anim. Officia eu duis aliquip incididunt. Do laborum et consequat aliqua sint consectetur.</p> 
    <p>Qui magna culpa minim reprehenderit magna in nisi ipsum. Ad cillum tempor minim fugiat est dolor. Cillum sit qui minim sint officia nostrud cillum cupidatat pariatur ipsum eiusmod velit labore. Sit in non fugiat minim sit.</p>
    <h2>예제</h2>
    <p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
    <h2>예제</h2>
    <p>Fugiat aliquip mollit proident velit magna esse ea officia eu. Esse do aliqua proident culpa eiusmod duis minim deserunt eu reprehenderit ut tempor. </p>
</div>

 

이 경우에는 위의 :nth-child(3)는 <p>Qui mangna culpa....에 적용됩니다. contents 클래스의 자식 요소 중 세 번째이기 때문이죠. 그리고 p:nth-of-type(3)는 <p>Irure incididunt duis...에 적용됩니다. contents 클래스의 자식 요소 중, 세 번째 <p> 요소이기 때문입니다. 

 

 

 

---

 

 

○ 수식을 사용해 위치 지정하기

 

여기서 우리는 :nth-child(n) 선택자와 같이, 특정 요소를 선택해서 스타일을 지정했습니다. 그런데 만일 1,3,5번째 혹은 2,4,6번째 요소와 같이 반복적인 선택이 필요할 경우에는, 다음과 같이 수식 형태의 옵션을 사용하게 됩니다. 

 

2n 또는 2n+1(n은 0부터 시작)을 사용할 수 있고, 또는 odd나 even을 사용하게 됩니다. 

 

/* div 요소에서 세 번째 자식인 p요소 선택 */
div p:nth-child(3)

/* div 요소에서 홀수 번째로 나타나는 자식 p요소 선택 */
div p:nth-child(odd)
div p:nth-child(2n+1)

/* div 요소에서 짝수 번째로 나타나는 자식 p요소 선택 */
div p:nth-child(even)
div p:nth-child(2n)

 

만일 어떤 테이블에서, 홀수 번째 열에만 특정 스타일을 적용한다면 다음과 같이 작성하게 됩니다. 

 

table tr:nth-of-type(2n+1) {
    background: lightgray;
    color: black;
}