[CSS] 가상 요소 vs 가상 클래스

CSS를 사용하다보면 가상 클래스 또는 가상 요소 선택자를 사용한다. 

사용하면서 우리는 두 개가 같은 거라고 생각하며 사용하고 있지만 실제로는 둘은 다른 녀석들이다. 

 

가상 요소 

실제로 존재하지 않는 가상의 요소를 만들어서 스타일을 주는 것을 말한다. 

 

사용할 때 콜론( : )을 사용할 수 있지만 가상 클래스와 구분하기 위해서 이중 클론( :: )을 권장한다. 

 

대표적인 가상 요소들을 나열하자면, 

▶ ::before : 지정된 요소의 앞에 가상의 요소 생성

▶ ::after : 지정된 요소의 뒤에 가상의 요소 생성

▶ ::placeholder : Input 필드의 힌트 텍스트에 스타일을 적용한다. 

▶ ::selection : 사용자에 의해서 선택(드래그)된 텍스트 영역의 속성을 변경한다. 

▶ ::first-letter : 지정된 요소의 첫 번째 글자에 스타일 적용

▶ ::first-line : 지정된 요소의 첫 번째 줄에 스타일 적용 

 

가상 클래스 

실제로 존재하는 요소에 특정 이벤트나 가상으로 클래스를 줘서 CSS를 제어하는 것을 말한다. 

 

만약 가상 클래스가 없는 경우, hover 시 CSS 변경이 필요하다면

자바스크립트를 사용해서 mouseover, mouseout 시 클래스를 주어서 변경해야하는데,

그렇게되면 불필요한 스크립트나 클래스가 들어가게 된다. 

 

하지만 이런 상황에 가상 클래스를 사용한다면 깔끔하게 css 제어가 가능하다. 

 

가상 클래스를 나열하자면, 

▶ :active : 해당 요소를 활성화(클릭) 했을 경우 스타일 부여

▶ :checked : input 태그의 type이 checkbox나 radio일 경우 체크가 되어있다면 스타일 부여

▶ :disabled : 선택, 클릭, 입력 등을 할 수 있는 요소에 비활성화 시 스타일 부여 

▶ :enabled : disabled와 반대로 활성화 시 스타일 부여 

▶ :empty : 자식 요소가 없는 태그에 스타일 부여

▶ :focus : input 태그에 focus를 한 상태일 때 스타일 부여

▶ :hover : 마우스를 올렸을 때 스타일 부여 

▶ :link : 미방문 링크에 스타일 부여

▶ :visited : 이미 방문한 링크에 스타일 부여 

▶ :not : (select)를 제외한 나머지 요소들에게 스타일 부여 

              ex) .main div:not(.header) { font-size: 10px; } 
              main 클래스의 div 태그 중 .header 태그를 제외한 요소에 스타일 부여 

▶ :read-only : input 태그에 readonly 속성을 지정한 요소에 스타일 부여

▶ :required : input 태그에 required 속성을 지정한 요소에 스타일 부여

▶ :fitst-child : 형제 요소 중 첫 번째 자식 요소에 스타일 부여

▶ :first-of-type : 형제 요소 중 해당하는 첫 번째 태그에게 스타일 부여

▶ :last-child : 형제 요소 중 마지막 자식 요소에 스타일 부여

▶ :last-of-type : 형제 요소 중 해당하는 태그의 가장 마지막 요소에 스타일 부여

▶ :nth-child : n 번째 요소에 스타일 적용 

▶ :nth-last-child : 뒤에서 n 번째 요소에 스타일 적용

▶ :only-child : 형제 요소 중 유일하게 있는 요소에 스타일 부여 ( 다른 형제 요소가 있다면 스타일 적용 X

▶ :only-of-type : 형제 요소 중 유일하게 있는 타입에 스타일 부여 

 

여기서 

first-child와 first-of-type와 같은 child와 of-type의 차이점은 

<div className="main">
  <p>test</p>
  <div>test</div>
</div>

.main div:first-child { font-size: 10px } => 적용 X 
.main div:first-of-type { font-size: 10px } => 적용 O

 다음과 같이 child는 요소를 기준으로 나타내고, of-type은 타입( 태그 )를 기준으로 나타낸다.