CSS - 가상클래스 선택자 - first-child, last-child, nth-child

 

FIRST-CHILD

• E 가 형제 요소 중 첫번재 요소라면 선택

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

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

설명

fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 첫번재 요소만 선택

※ 띄어쓰기 : 후손선택자

 

 

LAST-CHILD

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

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

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

설명

fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 마지막 요소 선택

 

 

NTH-CHILD

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

예제 1)

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

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

설명

fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 2번째 요소 선택

 

예제 2)

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

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

설명

fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 짝수 번째 요소만 선택

 

 

XXX-CHILD 주의사항

.fruits p:nth-child(1) {
    color: red;
}

<!— 선택된 요소 없음 —>
<div class=“fruis”>
    <div>딸기</div>
    <p>사과</p>
    <p>망고</p>
    <span>오렌지</span>
</div>

설명

fruits 클래스 선택자 찾아 첫번째 자식요소 <p></p> 태그 선택

.fruits 의 첫번째 요소가 <p></p> 태그가 아니기 때문에 선택이 안됨

 

 

 

출처 : heropy.org