[CSS] 가상요소에 가상클래스 적용하기

🤔 가상요소에 가상클래스? 뭐 먼저 쓰지?

이전 글에서 이미지 스프라이트 기법 관련한 글을 포스팅 했는데, 그 다음에 가상요소, 가상클래스 적용하다가 헷갈리는 부분이 있어서 글로 남기기로 했다.(오늘 페이지 마크업 끝내서 넘 기쁘다,,내일 파일구조 조금 수정해야지 힣)
❓ 궁금했던 점 : 가상요소로 만든 이미지에 가상클래스 사용 시 가상요소와 가상클래스를 어느 위치에 써야하는 지 궁금했다.

예제 코드

1. home-link 스타일

.home-link {
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  color: var(--gray-text-color);
}

2. home-link에 가상요소로 이미지 삽입

.home-link::before {
  content: '';
  display: block;
  background-image: url('이미지경로1');
  background-repeat: no-repeat;
  background-position: -5px -39px;
  background-size: 68px 68px;
  width: 24px;
  height: 24px;
}

3. home-link에 가상클래스로 focus시 다른 색 이미지 삽입

.home-link:focus::before {
  content: '';
  display: block;
  background-image: url('이미지경로2');
  background-repeat: no-repeat;
  background-position: -5px -39px;
  background-size: 68px 68px;
  width: 24px;
  height: 24px;
}

• 위와 같은 코드가 있다고 가정해보자.
• 2번 코드는 1번 home-link 태그에 가상요소로 배경 이미지를 삽입해주는 코드이다.
• 3번 코드는 2번의 가상요소 이미지를 focus 했을 때 또 다른 가상요소로 다른 이미지로 변경해주는 코드이다.

깨달은 점

💡 여기서 나는 조금 헷갈려서 home-link의 가상요소를 focus 했을 때 이미지가 변경된다고 생각을 해서 .home-link::before:focus 이런 식으로 코드를 짰는데 실행이 되지 않았다. (지금 글을 쓰면서 다시 곱씹어보니까 당연히 .home-link:focus::before가 맞다..😅) 원하는 요소에 focus 이벤트를 적용했을 경우 before 에 특정 스타일을 적용하는 것이기 때문에!.home-link:focus::before 이 순서로 작성하는게 맞다!! 앞으로는 헷갈리지 말아야지😝