가상클래스 선택자- nth-of-type, not

1. nth-of-type

태그이름과 동일한 타입인 형제 요소 중 n번째 요소라면 선택

.fruits p:nth-of-type(1){ /*p태그중에 첫번째꺼를 빨간색으로 하겠다*/
    color : red;
}

 

**주의사항(오류)**

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

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

다음과 같이 입력이 된다면, nth-of-type이 1이기 때문에 li태그중 딸기를 선택하게 된다. 하지만 딸기태그는 red라는 이름이 없기 때문에 오류가 된다.

 

 

 

2. 부정 선택자(Negation Selector)

.fruits li:not(.red){
    color :red;
}

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

클래스 red만 제외하고 전부 li태그를 빨간색으로 하겠다 라는 뜻이다.