CSS * 선택자 – 모든 요소 선택

`*` 선택자

* 선택자(전체 선택자, universal selector)는 문서의 모든 요소를 선택합니다.

주의할 점

* 선택자는 CSS로 생성하는 가상 요소(예를 들어 ::before, ::after)는 선택하지 않습니다.
가상 요소는 문서의 실제 요소가 아니기 때문입니다.

다음의 예제를 통해 살펴보겠습니다.

HTML

<style>
    * {
        border: 1px solid red;
        padding: 10px;
    }
    p::before {
        content: "문단의 ::before ";
        font-weight: 600;
        color: blue;
        background-color: gold;
    }
</style>

<div>
    <p>문단 요소입니다.</p>
    <p>문단의 <span>span</span> 요소입니다.</p> 
</div>

위 예제를 보면 CSS p::before로 <p>에 가상 요소를 만들어(문단의 ::before 라는 부분) 글자와 배경에 스타일링도 하였습니다.

* 선택자로 모든 요소에 border: 1px solid red로 빨간색 테두리를 지정했습니다.
그래서 모든 요소(<div>, <p>, <span>)에는 적용이 되었지만, CSS로 생성한 p::before에는 적용이 안 됨을 알 수 있습니다.

* 선택자를 사용할 때 이것은 가장 헷갈릴 수 있는 것으로, 주의하세요.

특정 유형의 선택자와 함께 사용

위 예제에서 section *의 의미는 <section>에 포함된 모든 요소를 의미합니다. 이처럼 * 선택자는 특정 유형의 선택자와 함께 사용될 수 있습니다.

`*` 선택자는 주로 어떻게 쓰이나

HTML의 모든 요소를 선택하는 * 선택자는 주로 CSS를 적용하지 않은 상태에서
브라우저가 기본으로 가지고 있는 기본 스타일인 사용자 에이전트 스타일(User agent style)을 요소에서 모두 제거하는데 많이 쓰입니다.

예를 들어, <h1>~<h6>나 <p> 요소 등은 margin-top과 margin-bottom이 CSS를 적용하지 않아도 브라우저에서 기본 스타일로 적용해 놓았습니다. 이러한 브라우저가 기본으로 가지고 있는 기본 스타일을 제거할 때 주로 사용합니다.

이렇게 브라우저가 기본으로 가지고 있는 기본 스타일을 제거하지 않으면 실제 웹 페이지를 스타일링할 때 특정 요소가 브라우저에서 기본으로 설정한 스타일이 있다는 사실을 고려하지 못해서 원하지 않는 스타일이 적용될 수 있기 때문입니다. 이것은 CSS로 스타일링할 때 매우 번거로울 수 있습니다.

아래는 CSS는 브라우저가 가지고 있는 모든 요소의 margin과 padding을 모두 제거하고 원하는 요소에 커스텀으로 스타일을 적용하는 예제입니다.

CSS 브라우저가 기본으로 가지고 있는 기본 스타일을 제거할 때 주로 사용합니다.

/* 브라우저가 기본으로 가지고 있는 기본 스타일을 제거 */
* {
    padding: 0;
    margin: 0;
}

/* 커스텀으로 스타일하기 */
p {
    margin-top: 0.5em;
    margin-bottom: 1em;
}
button {
    padding: 0.5em 1.5em;
}

특정 요소의 이름으로 요소를 선택하려면 '요소(element) 선택자'를 사용하세요.

CSS 요소(element) 선택자 사용 방법