[CSS] 가상요소, 가상클래스 차이점

공부하는도중 갑작스레 궁금증이 생겼습니다.

css 가상요소인 after 이나 before은 :after / :before 도 적용되고

::after / ::before도 적용이 됩니다.

그러나 가상클래스인 nth-child앞에 (:)이 아닌 (::)을 작성하면 적용이 되지 않았습니다.

 

그러면 가상요소와 가상클래스를 어떻게 구분짓고 올바르게 사용할 수 있을까요?

일단 HTML에 존재하는 요소를 선택하면 가상 클래스,

HTML에 존재하지 않지만 가상을 요소를 생성하여 선택하는것이 가상 요소 선택자라고 보시면 될 것 같습니다.

 

여기

[CSS] 꼭 알아야할 CSS선택자

를 클릭하여 선택자들을 확인 할 수 있습니다.

위 링크안에서, 

::after / ::before / ::first-line / ::first-letter 이 가상 요소

나머지는 전부 가상 클래스 였습니다.