[Css pseudo] ':' vs '::' 비교

input:focus, input:hover {		/* pseudo-class */
	...
}

span::before, span::after {		/* pseudo-element */
	...
}

pseudo-class(':') pseudo-element('::')

이름 그대로에 의미로 가상 클래스, 가상 요소를 뜻 합니다.  

과거에는 두 가지 pseudo(슈도) 선택자를 구별해서 사용하지 않았지만 특정 시점부터 구별해서 사용하고 있습니다.

(ie도 지원되니깐 꽤 오래되었죠.)

물론 Single Colon(':')으로 일부 pseudo-element를 사용가능 하지만  의미있는(semantic) css 작성을

위해 구별해서 사용하는것이 중요하겠습니다.

 

ps.

pseudo-element 모두가 ':' 과 호환되는것은 아닙니다. mdn을 확인해주세요.

mdn 호환성 표시

 

출처

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Pseudo-elements - CSS: Cascading Style Sheets | MDN