CSS를 제대로 다루기 위해 가장 먼저 이해해야 하는 개념이 바로 선택자(selector)입니다.
선택자는 말 그대로 어떤 HTML 요소에 스타일을 적용할지 지정하는 규칙입니다.
선택자를 제대로 이해하지 못하면 원하는 요소에 스타일이 적용되지 않거나, 예상하지 못한 곳에 CSS가 적용되어 유지보수가 어려워질 수 있습니다. 특히 실무에서는 선택자 사용 방식에 따라 코드의 가독성과 성능까지 달라집니다.
이번 글에서는 CSS 선택자 종류를 기초부터 실무까지 정리해보겠습니다.
자주 사용하는 기본 선택자부터 관계 선택자, 속성 선택자, 가상 클래스까지 한 번에 이해할 수 있도록 예제와 함께 설명드리겠습니다.
CSS 선택자(selector)란?
CSS 선택자는 HTML 문서에서 스타일을 적용할 대상을 지정하는 문법입니다.
p {
color: blue;
}
위 코드에서 p가 바로 선택자이며, 모든 p 태그에 파란색 글자 스타일이 적용됩니다.
1. 전체 선택자 (*)
전체 선택자는 문서 내 모든 요소를 선택합니다.
* {
margin: 0;
padding: 0;
}
보통 CSS 초기화(reset)에서 자주 사용됩니다.
2. 태그 선택자
특정 HTML 태그를 직접 선택합니다.
h1 {
font-size: 32px;
}
문서 전체의 동일한 태그에 공통 스타일을 줄 때 유용합니다.
3. 클래스 선택자 (.class)
가장 실무에서 많이 사용하는 선택자입니다.
.button {
background: black;
color: white;
}
HTML에서는 다음과 같이 연결됩니다.
<button class="button">버튼</button>
재사용성이 높아 유지보수에 매우 유리합니다.
4. 아이디 선택자 (#id)
고유한 하나의 요소를 선택할 때 사용합니다.
#header {
position: fixed;
}
HTML 문서에서 같은 id는 한 번만 사용하는 것이 원칙입니다.
5. 그룹 선택자 (,)
여러 요소에 동일한 스타일을 적용할 수 있습니다.
h1, h2, h3 {
font-weight: bold;
}
중복 코드를 줄이는 데 매우 효과적입니다.
6. 자손 선택자 (공백)
특정 요소 내부의 모든 하위 요소를 선택합니다.
.card p {
color: gray;
}
card 내부에 있는 모든 p 태그에 적용됩니다.
7. 자식 선택자 (>)
바로 아래 단계의 자식 요소만 선택합니다.
.menu > li {
list-style: none;
}
중첩 구조가 복잡할 때 매우 중요합니다.
8. 인접 형제 선택자 (+)
바로 다음 형제 요소를 선택합니다.
h2 + p {
margin-top: 10px;
}
h2 바로 다음에 오는 p 태그만 선택됩니다.
9. 일반 형제 선택자 (~)
뒤에 오는 모든 형제 요소를 선택합니다.
h2 ~ p {
color: #666;
}
10. 속성 선택자
특정 속성을 가진 요소를 선택합니다.
input[type="text"] {
border: 1px solid #ddd;
}
폼 요소 스타일링에서 자주 사용됩니다.
11. 가상 클래스 선택자
특정 상태를 선택할 수 있습니다.
a:hover {
color: red;
}
대표적으로 자주 사용하는 가상 클래스는 다음과 같습니다.
- :hover
- :focus
- :first-child
- :last-child
- :nth-child()
12. 가상 요소 선택자
요소의 특정 부분을 선택합니다.
p::before {
content: "• ";
}
대표적으로 다음을 많이 사용합니다.
- ::before
- ::after
- ::placeholder
실무에서 가장 많이 쓰는 선택자 TOP 5
실무에서는 아래 선택자를 가장 많이 사용합니다.
- 클래스 선택자
- 자식 선택자
- 가상 클래스
- 속성 선택자
- 그룹 선택자
선택자 사용 시 주의할 점
너무 깊은 선택자 피하기
.header .nav ul li a span
이처럼 깊은 구조는 유지보수가 어렵습니다.
id보다 class 우선 사용
스타일링은 id보다 class 기반으로 작성하는 것이 재사용성과 관리 측면에서 유리합니다.
명확한 구조 유지
선택자가 복잡할수록 CSS 충돌이 발생하기 쉽습니다.
CSS 선택자와 SEO의 관계
선택자는 SEO에 직접적인 영향을 주지는 않지만, 구조가 명확한 HTML과 함께 사용하면 유지보수성과 접근성이 향상됩니다.
특히 시맨틱 구조와 class 네이밍을 잘 조합하면 검색엔진이 문서를 이해하는 데도 도움이 됩니다.
마무리
CSS 선택자는 스타일링의 시작이자 핵심입니다.
선택자를 제대로 이해하면 더 적은 코드로 더 정확한 스타일을 구현할 수 있습니다.
정리하면 다음과 같습니다.
- 태그 / class / id는 기본 선택자
- 자식 / 자손 / 형제 선택자는 구조 제어용
- 가상 클래스와 속성 선택자는 실무 활용도가 높다.
CSS를 잘하고 싶다면 선택자부터 확실하게 익히는 것이 가장 빠른 지름길입니다.