CSS 선택자 - 가상 클래스 선택자

 

 

---

 

가상 클래스 선택자

- 선택자 뒤에 콜론 ( : )을 붙이고 사용

 

 

HOVER

 - 선택자 요소에 마우스 커서가 올라가 있는 동안 선택

.box:hover {
  background-color: orange;
}

=> .box 요소에 마우스를 올리면 배경 색상이 오렌지 색상으로 변경

 

ACTIVE

 - 선택자 요소에 마우스를 클릭하고 있는 동안 선택

.box:active {
  background-color: red;
}

=> .box 요소를 클릭하고 있는 동안 배경 색상이 빨간색으로 변경

 

FOCUS

 - 선택자 요소가 포커스 되면 선택

 - input 태그와 같이 포커스가 가능한 요소에 적용 가능.

input:focus {
  background-color: red;
}

=> input 요소에 포커스가 되면 배경 색상이 빨간색으로 변경

 

=> 포커스가 되지 않는 일반 요소에 포커스가 가능하도록 속성 부여하는 방법

<div tabindex="-1"></div>

=> html요소에 tabindex  값을 -1로 해주면 요소 포커스 가능.

 

FIRST CHILD

 - 선택자가 형제 요소 중 첫째라면 선택

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

=> box 클래스의 자식 요소 중 span 태그가 첫 번째 요소라면 선택

=> 첫번째 요소가 span이 아니라면 아무것도 선택되지 않음.

 

LAST CHILD

 - 선택자가 형제 요소 중 막내라면 선택

.box span:last-child {
  color: red;
}

=> box 클래스의 자식 요소 중 span 태그가 마지막 요소라면 선택

=> 마지막 요소가 span이 아니라면 아무것도 선택 되지 않음.

 

NTH CHILD

 - 선택자가 형제 요소 중 (n)번째 라면 선택

 - n은 0부터 시작(제로 베이스)

 - (2n) 과 같은 키워드 사용 가능

 - (2n)은 짝수 선택 (2n + 1)은 홀수 선택

.box span:nth-child(2) {
  color: red;
}
=> span태그가 .box의 2번째 자식 요소라면 선택

.box span:nth-child(2n) {
  color: red;
}
=> span태그가 .box의 2, 4, 6, 8 번째 자식 요소라면 선택

.box span:nth-child(2n + 1) {
  color: red;
}
=> span태그가 .box의 1, 3, 5, 7 번째 자식 요소라면 선택

 

NOT

 - 부정 선택자

*:not(span) {
  color: red;
}

=> 전체 선택자 중 span태그가 아니라면 선택.