nth-child() / nth-of-type()

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

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

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

/* n번째 요소를 선택 */
.fruits li:nth-child(n) {
    color: red;
}

/* 2번째 요소 이상을 모두 선택 */
.fruits li:nth-child(n+2) {
    color: red;
}

/* 짝수 요소들을 선택  */
.fruits li:nth-child(2n) {
    color: red;
}

*해석할때 오른쪽(몇번째 자식)에서 왼쪽(어떤 요소)으로 해야 정확

(조건의 몇번째 자식요소가 어떤 요소다 이런식으로)

 

<div class="box">
    <div>1</div> /* 선택 */ 
    <div>2</div>
    <div>3
        <div>3-1</div>
        <div>3-2</div>
        <div>3-3</div>
        <div>3-4</div>
    </div>
    <div>4</div>
</div>

 

.box div:first-child{
    color: red;
}

.box :first-child{
    color: red;
}

위와 같이 CSS를 작성 하면 3-1도 선택됨

(후손 요소중 첫번째는 다 선택되므로)

 

.box > div:first-child{
    color: red;
}

이럴 때는 후손요소가 아니라 자식요소로 정확하게 선택하는 것이 좋음

(후손요소는 모호 할 수 있음)

 

<div class="num">
    <div>1</div>
    <p>2</p> /* 선택 */
    <p>3</p>
    <span>4</span>
</div>

.num p:nth-of-type(1) {
    color: red;
}

타입(tag를 의미, 클래스x)이 p인 것 중에 첫번째