[CSS] 가상 선택자(Hover, Active, Focus, Visited 등)

 

 

개인적으로 많이 사용한다고 느끼는 선택자는 hover와 active인 것 같다.

하지만 요즘 다른 웹사이트를 보면 hover는 사용하지만 active를 사용하는걸 제외하는 추세인 듯 하다.

그래도 나는 눌릴때의 구분을 주는게 좋다고 생각하여 active를 넣어주는 편이다.

 

---

 

- hover : 마우스 커서가 대상 위로 올라왔을 때

 

.text {
 color: #408cff;
}

.text:hover {
 filter: brightness(0.5);
}

 

Hover 적용했을 때

- active : 마우스로 클릭했을 때

.text {
 color: #408cff;
}

.text:active {
 filter: brightness(0.5);
}

 

Active 적용했을 때

 

이 밖에도 다음과 같은 선택자들이 존재한다.

 

- focus : 대상이 선택된 경우

- focus-within : 자식 대상이 선택된 경우 부모의 상태

- visited: 링크를 방문했을 때

- link: 링크를 방문하지 않았을 때

 

궁금한게 있다면 댓글을 작성해주면 좋겠다!