CSS - 가상클래스 선택자

HOVER

E:hover / E 에 마우스(포인터)가 올라가 있는 동안에만 E 선택.

ACTIVE

E:active / E 를 마우스로 클릭하는 동안에만 E 선택.

FOCUS

E:focus / E 가 포커스 된 동안에만 E 선택.(대화형 컨텐츠만 가능)

-

FIRST CHILD

E:first-child / E 가 형제 요소 중 첫번째 요소라면 선택.

LAST CHILD

E:last-child / E 가 형제 요소 중 마지막 요소라면 선택.

 
/* fruits 후손들 중에 첫번째 li를 찾는다 */
.fruits li:first-child {
    color: red;
}
/* fruits 후손들 중에 마지막 li를 찾는다 */
.fruits li:last-child {
    color: red;
}

<ul class="fruits">
    <li>사과</li>   <!-- :first-child -->
    <li>딸기</li>
    <li>오렌지</li>
    <li>망고</li>   <!-- :last-child -->
</ul>

-

NTH CHILD

E:nth-child(n) / E 가 형제 요소 중 n 번째 요소라면 선택.(n 키워드 사용시 0부터 해석)

 
/* fruits 후손들 중에 2번째 li를 찾는다 */
.fruits li:nth-child(2) {
    color: red;
}
 
/* fruits 후손들 중에 짝수 li를 찾는다 */
.fruits li:nth-child(2n) {
    color: red;
}

<ul class="fruits">
    <li>사과</li>
    <li>딸기</li>   <!-- :nth-child(2) -->
    <li>오렌지</li>
    <li>망고</li>
</ul>
 
<ul class="fruits">
    <li>사과</li>
    <li>딸기</li>   <!-- :nth-child(2n) -->
    <li>오렌지</li>
    <li>망고</li>   <!-- :nth-child(2n) -->
</ul>

NTH OF TYPE

E:nth-of-type(n) / E 의 타입(태그이름)과 동일한 타입인 형제 요소 중 E 가 n 번째 요소라면 선택.(n 키워드 사용시 0부터 해석)

 

*nth-xxx 는 뒤에서 부터 해석함.

<div class="fruits">
  <div>딸기</div>
  <p>사과</p>
  <p>망고</p>
  <span>오렌지</span>
</div>

 
.fruits {
  font-size: 40px;
}
/* fruits 클래스의 첫번째 자식이 p 가 아니기 때문에 선택 안됨. 
해석을 뒤에서 부터 해야 함.*/
.fruits p:nth-child(1) {
  color: red;
}

 

-

NOT(부정 선택자)

E:not(S) / S 가 아닌 E 선택.

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

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