안녕하세요!! @wonnieyoon입니다.
오늘은 가상 클래스 선택자를 배워보겠습니다.
일부만 배우는 것이니 궁금하시면 따로 더 찾아보세요!

---

가상 클래스 선택자

가상클래스 선택자는 클래스 선택자는 아니지만
엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를
선택할 수 있다 해서 붙여진 이름입니다.

---

사용법

처음 html 화면을 시작하면 방문함과 방문안함이 보여지게 됩니다.
방문함이 보라색인 이유는 갔다온 사이트이기 때문에 보라색으로 보여지도록 기본적으로 되어있는것이고 마우스를 글자에 올려놓으면 빨간색으로 바뀝니다.
그것은 hover라는 마우스를 위에 올려 놓았을때 적용되는 가상 클래스 선택자이고 active라는것은 마우스를 클릭했을때 적용되는 가상 클래스 입니다.그런데 제가 사진을 캡처하려다 보니 눌리는 부분은 캡처를 하지 못했습니다.
여러분들이 마우스의 글자를 눌렀다면 이상한점을 발견하셨을것입니다.
분명 active는 눌렀을때 작동되는것인데 여전히 hover만 적용됩니다. 즉 빨간색이 유지된다는 것이죠. 하지만 누른 상태에서 글자를 벗어난다면 색깔이 변하는것을 볼수있습니다.
이러한 상황이 발생하는 이유는 가상 선택자에서 여러 상태가 겹칠경우 가장 늦게 적용받는선택자의 영향을 받게 됩니다.
그렇기 때문에 사진의 코드에서는 hover의 코드를 active윗 부분으로 옮긴다면 적절하게 원하시는 스타일을 보실수 있습니다.
선택자를 사용하실때에는 관계를 잘 따져 보시고 사용하기실 바랍니다.ㅎ