프론트엔드 개발자로서 실무에서 css를 사용하다 보면 가상 클래스와 가상 요소 선택자라는 단어를 많이 들을 수 있다.
평소엔 이 두 선택자의 차이를 구분하지 못하고 사용했는데,
이번 기회에 각 선택자의 특징과 차이점에 대해서 알아보려 한다.
가상 클래스
먼저 가상 클래스란
실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 부여해
css로 제어하는 것을 의미한다. (동적으로 스타일 부여)
예를 들어,
특정 a태그에 마우스를 올려 (hover) 색상을 변경하려고 할 때
가상 클래스를 사용하지 않는다면
a 태그에 스크립트로 mouseover 이벤트를 이용하여
해당 이벤트 발생 시 색상을 변경해는 로직을 추가해야 한다.
<style>
a{color:#555;}
a.on{color:#fff;}
</style>
<body>
<a href="#">Button</a>
<script>
$("a").on("mouseover", function(){
$(this).addClass("on");
}).on("mouseout", function(){
$(this).removeClass("on");
});
</script>
</body>
이러한 상황에선 마우스 오버라는 이벤트 상황에 맞춰
실제로 존재하는 a 태그에 가상으로 :hover라는 클래스를 부여해
간단하게 css로 색상을 제어할 수 있다.
// @NOTE: :hover 예서
<style>
a{color:#333;}
a:hover{color:#fff000;}
</style>
<body>
<a href="#">Button</a>
</body>그 외에도 다양한 마우스 이벤트와 해당 태그 안 자식 요소나 형제 요소들을 제어할 수 있다.
* 가상 클래스 종류
| 가상 클래스 | 설명 |
| :active | 해당하는 요소를 활성화했을 때 즉, 클릭한 상태일 때 스타일 부여 |
| :checked | input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크되어 있을 때 스타일 부여 |
| :disabled | 선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 부여 ex) input, button, a태그 |
| :enabled | :disabled의 반대로 활성화되어있는 요소에 스타일 부여 |
| :empty | 자식 요소가 없는 태그에 스타일 부여 |
| :focus | input 태그에 focus를 한 상태일 때 스타일 부여 |
| :hover | 해당 요소에 마우스를 올렸을 때 스타일을 부여 |
| :link | 미방문 링크에 스타일 부여 |
| :visited | 이미 방문한 링크에 스타일 부여 |
| :not(selector) | (selector)를 제외한 나머지 요소들에 스타일 부여 ex) .main p:not(.cmt){color:red} (.main 클래스 하위에 있는 p 태그 중 .cmt 태그를 제외하고 color:red를 적용) |
| :read-only (읽기전용) | input 태그에 readonly 속성을 지정한 요소에 스타일 부여 |
| :required (필수입력) | input 태그에 required 속성을 지정한 요소에 스타일 부여 |
| :first-child | 형제 요소 중 첫 번째 자식요소(맨 앞)에 스타일 부여 ex) .main div:first-child{color:red;} (.main 클래스 자식 요소인 div 중 첫 번째 div에 color:red 적용) * 만약 div 이전 형제요소 중 다른 태그가 있으면 스타일 적용이 어렵다. <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-child{color:red} -> 아무런 스타일 변화가 없다. |
| :first-of-type | 형제 요소 중 해당하는 태그의 첫 요소에 스타일 부여 ex) <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-of-type{color:red} -> div태그 (test2)에 color:red가 적용된다. |
| :last-child | 형제 요소 중 가장 마지막 요소에 스타일 부여 |
| :last-of-type | 형제 요소 중 해당하는 태그의 가장 마지막 요소에 스타일 부여 |
| :nth-child(n) | n번째 요소에 스타일 적용, n에 숫자 뿐만 아니라 even(짝수), odd(홀수), 2n+1 등 특정 수식을 줄 수 있다. |
| :nth-last-child(n) | 뒤에서 n번째 요소에 스타일 부여 |
| :only-child | 형제 요소 중 유일하게 있는 요소에 스타일 부여 (다른 형제 요소가 있으면 스타일 적용x) ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> div의 형제에 p태그가 있으므로 스타일 적용 x |
| :only-of-type | 형제 요소 중 같은 유형의 형제가 없이 유일한 요소에 스타일 부여 ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> 형제 요소 중 div는 하나기 때문에 스타일 적용 |
가상 요소
실제로 존재하는 요소에 가상으로 클래스를 주던 가상 클래스와는 다르게
실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.
HTML 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, HTML 내용을 변경하지 않고
선택한 요소의 앞뒤에 새 콘텐츠를 추가할 수 있다.
콜론 (:) 과 이중 콜론 (::) 모두 사용 가능하지만,
가상 클래스와 구분을 위해 이중 콜론 (::) 사용을 권장하고 있다.
(이중 콜론은 ie9 이상부터 지원한다.)
선택자::가상요소 { property: value; }* 예시
::first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일 부여
p::first-line {
color: #ff0000;
font-variant: small-caps;
}::first-letter : 이 요소는 텍스트의 첫 문자에 특정 스타일을 부여
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
* 가상 요소 종류
| 가상요소 | 설명 |
| ::before | 지정된 요소의 앞에 가상의 요소 생성 <div class="main"> <p>test1</p> </div> .main p:before{content:"- "} -> - test1로 출력된다. (- 표시를 before로 삽입) |
| ::after | 지정된 요소의 뒤에 가상의 요소 생성 |
| ::first-letter | 지정된 요소의 첫 번째 글자에 스타일 적용 |
| ::first-line | 지정된 요소의 첫 번째 줄에 스타일 적용 |
참고 문서
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
https://blogpack.tistory.com/1025
