CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. 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>
가상 클래스(Pseudo-class) hover를 이용하면 요소에 마우스를 올렸을 때 효과를 줄 수 있습니다.
다음은 텍스트의 색을 파랗게 만드는 예제입니다. 그런데, 가상 요소에는 적용되지 않습니다.
h1:hover { color: blue; }
가상 요소에도 적용하기 위해서 다음과 같은 코드를 추가해도 적용되지 않습니다.
h1:before:hover { color: blue; }
이유는 순서가 잘못되었기 때문입니다. 다음과 같이 [가상 클래스 - 가상 요소] 순으로 해야 적용됩니다.
h1:hover:before { color: blue; }