CSS 범용 선택자(Universal Selector) 완벽 정리

CSS 선택자란?

CSS에서 선택자(selector)는 스타일이 적용될 대상이 되는 HTML 태그를 의미합니다. <h1>, <table>, <p> 등 문서 내 어떤 태그든 선택자가 될 수 있습니다.

타입 선택자(Type Selector)

가장 기본적인 방식은 타입 선택자입니다. h1, h2, h3, p처럼 특정 HTML 태그 이름을 직접 지정하여 해당 요소에만 스타일을 적용합니다.

h2 {
    color: #FFFF00;
}

위 코드는 문서 내 모든 <h2> 요소의 글자 색상을 노란색(#FFFF00)으로 변경합니다.

범용 선택자(Universal Selector)

반면 범용 선택자는 특정 유형의 요소만 골라 선택하는 것이 아니라, 별표(*) 기호를 사용해 문서 내 모든 요소를 한꺼번에 매칭합니다.

* {
    color: #FFFF00;
}

위 코드는 요소의 종류에 상관없이 페이지 전체 텍스트의 글자 색상을 노란색으로 지정합니다. 초기화 스타일(reset)이나 전역 기본값을 설정할 때 특히 유용하게 활용됩니다.

또한 범용 선택자는 다른 선택자와 조합하여 사용할 수도 있습니다. 예를 들어 .container *처럼 작성하면 특정 클래스를 가진 요소의 모든 자손 요소에만 스타일을 적용할 수 있습니다.