가상셀렉터

목차

 

가상셀렉터

우리가 css에서

콘텐츠

를

선택

하는 것을 모두

셀렉터

라 한다.

*,
body,
.class,
#id,
.class::nth-of-type(2){
 padding:0;
}

여기서 가상이 붙은 것이

가상셀렉터

인데,

말 그대로

실제 하지 않는 것

을

선택

하는 것이다.

 

예로 들어 class a태그에 마우스를 올렸을 때,

.a:hover{
  background: purple;
}

class a 태그의 이전에,

.a::before{
  background: purple;
}

는 실제로 존재하는 태그가 아니다.

 

만들어진(마크업 된) 실제 요소가 아닌

가상의 요소

를

정하여

이를

설정

하는 것

이 가상 셀렉터의 역할이다.

 

구글링을 하면서 알게 된 게, 가상 요소(pseudo-element)와 가상 클래스(pseudo-classes)가 구분된다는 걸 알게 되었다.

가상 클래스

Pseudo-classes - CSS: Cascading Style Sheets | MDN

가상 클래스는

해당 요소

가

특수한 상황일 때

를 설정할 수 있다.

(마우스를 올렸을 때, 포커스 상태일 때, ~번째 자식일 때)

 

종류는 이 정도 된다.

특징으로는

:

(colon)이

하나

라는 것

가상 요소

Pseudo-elements - CSS: Cascading Style Sheets | MDN

가상 요소는 존재하지 않는 콘텐츠를 의미한다.

예로 들어

.element::before{
  content:"";
}

위의 코드는

element 클래스 요소 앞에

공백인 글자(콘텐츠)를 가진 요소를 설정한다는 뜻이다.

 

이는

마크업 때

는 없었던,

존재하지 않는 존재

를

우리가 가상의 요소로써 정의 한 것이다.

 

그리고 이는 이 코드를

실행할 때만들어진다

.

이것이 가상요소이다.

 

특징으로는 앞에 :: doubleColon을 가지고 있다.

 

또한

윈도우 9 이전에는 호환되지 않는다

는 걸 기억하자.

colon을 하나 쓰면 된다고 한다.

 

끝