과거에 ::before 사용시 콜론:을 하나만 입력하여 :before로 작성했었는데, 어느날부터 콜론을 두개씩 입력하기 시작했다. 이유가 뭘까?
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification. -W3C
위와 같이 W3C 문서를 살펴보면 알 수 있듯, 이중 콜론::은 의사 요소와 의사 클래스를 구분하기 위해 새롭게 도입된 문법이라고 적혀있다. 그렇다면, 의사 요소와 의사 클래스를 구분하는 이유가 뭘까? 각자 어떤 역할을 하고 있을까?
의사 요소와 의사 클래스의 역할
::before, ::after
- 의사 요소 Pseudo-elements
- 가상 element를 만들어 특정 부분에 스타일을 적용하기 위해 사용됨
- IE8 버전 이하는 단일 콜론을 지원함
- 최신 브라우저는 두 가지 케이스 모두를 지원함
:hover, :active, ...기타
- 의사 클래스 Pseudo-classes
- element의 상태를 나타내는 선택자
결론
- 콜론
:을 하나만 사용하는:hover,:active,:focus등과 콜론을 두개 사용하는::before와::after는 서로 역할이 다름 - 즉, 두 역할 간의 구분을 위해 콜론이 추가됨
참고
박선우