CSS - 가상클래스 선택자 - NTH OF TYPE, NOT

NTH OF TYPE

E 의 타입(태그이름)과 동일한 타입인 형제 요소 중 E 가 n 번재 요소라면 선택(n 키워드 사용 시 0 부터 해석(Zero-base))

 

예제 1)

.fruits {
    font-size : 40px;
}
.fruits p:nth-of-type(1) {
    color : red;
}


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

설명

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

 

예제 2)

.fruits {
    font-size : 40px;
}

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

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

설명

red 라는 클래스를 가진 요소의 태그 이름은 li 태그

red라는 클래스를 먼저 검색 이후 타입을 li 반환

li 태그 중에 첫번째 요소 반환(오렌지) 하지만 red 라는 클래스를 가지지 않았음으로 선택된게 없음.

nth-of-type의 경우 태그의 이름으로 선택, 클래스와 혼동해서 쓰면은 문제 발생 유발

 

 

NOT 부정 선택자(Negation Selector)

• S 가 아닌 E 선택

.fruits : {
    font-size : 40px;
}
.fruits li:not(.strawberry) {
    color : red;
}

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

 

 

 

출처 : heropy.org