CSS *::before, *::after 의미

CSS ' *::before, *::after ' 이건 무슨 뜻일까? 한참 찾아 헤맸다. 도저히 못찾다가 포기할까 하던 찰나 가까스로 그 의미를 찾았다.

' :before '와 ' :after '에 대한 설명은 쉽게 찾을 수 있었다.

문제는 ' * '의 의미가 뭔지 도통 모르겠다는 것이다.

구글과 다음, 네이버 검색을 통해 아무리 뒤져도 * 이 포함된 검색이 안나온다.

뭐 별 수 있나. 무식하게 문서 하나 하나 뒤지면서 찾을 때까지 훑어보는 수밖에..

지쳐서 포기하고픈 마음이 드는 찰나.. 드뎌 찾아냈다.

CSS 태그 앞에 ' * '를 붙여주면 IE6에서만 작동된다고 한다.

허.. 결국 말로만 들어본 CSS 핵이라는 소리네...

그런데, 또 한가지 의문이 생겼다.

' *::before, *::after '를 보면 before와 after의 앞에 콜론이 두 개 ( :: )가 붙어 있는 것이다.

다른 설명들에선 콜론이 한 개 ( : ) 뿐이었는데...

이 의문은 금방 해결할 수 있었다.

CSS2에서 1개가 붙고, CSS3에서 2개가 붙는다고 한다.

[업데이트] : 글을 써놓고 보니 아무래도 뭔가 찜찜해서 혹시나 하는 생각에 계속 관련 정보를 검색해보았다.

그러던 중 더 그럴듯한 정보를 얻었다.

' * '는 '전체선택자'로 모든 엘리먼트의 값을 선택하라는 의미라는 것이다.

아무래도 이 설명이 더 맞는 것 같아 보인다.