가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다. 순서가 바뀌면 스타일을 정의하더라고 제대로 적용되지 않습니다.
가상 요소와 가상 클래스 순서
- 가상 요소를 이용하면 특정 요소 앞에 텍스트이나 이미지를 넣을 수 있습니다.
- HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다.
예제 1
다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다.
<h1>everyone</h1>
h1:before {
content: "Hi, ";
color: red;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
다음은 가상 클래스 hover를 이용하여 요소에 마우스를 올렸을 때 글자 색을 파랗게 효과를 준 예제입니다.
h1:before {
content: "Hi, ";
color: red;
}
h1:hover {
color: blue;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
가상 요소 :before 에는 글자 색이 파란색으로 적용되지 않습니다.
예제 3
가상 요소에도 적용하기 위해서 다음과 같은 코드를 추가해도 적용되지 않습니다.
h1:before {
content: "Hi, ";
color: red;
}
h1:hover {
color: blue;
}
h1:before:hover {
color: blue;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
이유는 순서가 잘못되었기 때문입니다.
예제 4
다음과 같이 [가상 클래스 - 가상 요소] 순으로 해야 적용됩니다.
h1:before {
content: "Hi, ";
color: red;
}
h1:hover {
color: blue;
}
h1:hover:before {
color: blue;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.