CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      h1:before {
        content: "Hello, ";
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>JB</h1>
  </body>
</html>

가상 클래스 hover를 이용하면 요소에 마우스를 올렸을 때 효과를 줈 수 있습니다. 다음은 텍스트의 색을 파랗게 만드는 예제입니다. 그런데, 가상 요소에는 적용되지 않습니다.

h1:hover {
  color: blue;
}

가상 요소에도 적용하기 위해서 다음과 같은 코드를 추가해도 적용되지 않습니다.

h1:before:hover {
  color: blue;
}

이유는 순서가 잘못되었기 때문입니다. 다음과 같이 [가상 클래스 - 가상 요소] 순으로 해야 적용됩니다.

h1:hover:before {
  color: blue;
}

CSS 강좌