가상클래스 선택자(Pseudo-Classes Selectors) - first-child, last-child, nth child

1. First child

형제 요소 중 첫번째 요소라면 선택 

.fruits li:fist-child{
    color : red;
}

<ul class = "fruits">
        <li>딸기</li> <!--선택-->
        <li>망고</li>
        <li>사과</li>
        <li>오렌지</li>
    </ul>

cf. 다음과 같이 후손 선택자를 많이 이용한다.

 

 

2. Last child

형제 요소 중 마지막 요소라면 선택

.fruits li:last-child{
    color : red;
}

<ul class = "fruits">
        <li>딸기</li> 
        <li>망고</li>
        <li>사과</li>
        <li>오렌지</li> <!--선택-->
    </ul>

 

 

3. Nth child

형제 요소 중 n번쨰 요소라면 선택 (키워드 사용시 0부터 해석(Zero-base))

 

2번째 요소만 선택

.fruits li:nth-child(2){
    color : red;
}

<ul class = "fruits">
        <li>딸기</li> 
        <li>망고</li> <!--선택-->
        <li>사과</li>
        <li>오렌지</li> 
    </ul>

 

2의 배수 요소들 선택

.fruits li:nth-child(2n){
    color : red;
}

<ul class = "fruits">
        <li>딸기</li> 
        <li>망고</li> <!--선택-->
        <li>사과</li>
        <li>오렌지</li> <!--선택-->
    </ul>

 

3번째 요소부터 이후 요소들 선택

.fruits li:nth-child(n+3){
    color : red;
}

<ul class = "fruits">
        <li>딸기</li> 
        <li>망고</li> 
        <li>사과</li> <!--선택-->
        <li>오렌지</li> <!--선택-->
    </ul>