[CSS3] nth-child(), nth-of-type()

nth-child()

E:nth-child(n)

부모의 n번째 자식인,  E요소

 

nth-of-type()

E:nth-of-type(n)

같은 유형의 n번째 형제인, E요소

 

n값에는 키워드, 정수, 공식이 들어갈 수 있다.

키워드 : even(짝수), odd(홀수)

정수 : 양수, 음수, 또는 0

공식 : an+b

<div class="box">
    <p>1. 나는 p</p>
    <span>2. 나는 span</span>
    <p>3. 나는 p</p>
    <span>4. 나는 span</span>
    <p>5. 나는 p</p>
</div>

위의 상태에서 아래와 같은 css를 적용하면?!

        p:nth-child(3) {
            color: red;
        }

        p:nth-of-type(3) {
            color: blue;
        }


        span:nth-child(1) {
            color: green;
        }

2번째 경우에서 p:nth-of-type(3)이기 때문에, p의 형제 중 3번째이므로 5번째 요소가 색깔이 파란색으로 적용된다.

즉, 특정 요소만을 순서 카운팅한다.

3번째 경우에서 nth-child(1)과 같은 경우, 부모 기준 첫번째 자식이 span태그가 아니므로 green색깔이 적용되지 않는다.

span:nth-child(2) 으로 수정하면, 부모 기준 두번째 자식이 span태그가 맞기 때문에 green색깔이 적용된다.

nth-last-child()

E:nth-last-child(n)

맨 마지막부터 계산해서 같은 부모의 n번째 자식인 E요소

 

nth-last-of-type()

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

맨 마지막부터 계산해서 같은 유형의 n번째 형제인 E요소

nth-last-of-type(even) 맨 마지막부터 계산하여 홀수 형제를 선택함.

nth-last-of-type(2n+1)이라고 하면 맨 마지막부터 계산하여 0부터 시작하여 같은 유형의 1, 3, 5번째 형제를 선택한다.