CSS 선택자 정리

CSS에서 가장 중요한 개념 중 하나는 선택자(selector)이다. 선택자는 "어떤 HTML 요소에 스타일을 적용할지"를 지정하는 규칙이다. 이번 글에서는 기본 선택자 → 가상 선택자 → 속성 선택자 → 자손/후손 선택자 순으로 정리하고, 마지막에는 실무에서 자주 쓰이는 패턴을 소개한다.

 

 

 

기본 선택자 (Tag, Class, ID)

태그 선택자

HTML 태그 이름으로 요소를 선택한다.

p { color: blue; }

• 모든 <p> 태그의 텍스트 색상을 파란색으로 적용.

클래스 선택자

. 기호를 사용하며, 여러 요소에 동일 스타일을 적용할 때 사용한다.

.highlight { background-color: yellow; }

• <span class="highlight">텍스트</span> 부분이 노란색 배경.

아이디 선택자

# 기호를 사용하며, 한 문서에서 고유한 요소에 적용된다.

#main-title { font-size: 32px; }

• <h1 id="main-title">제목</h1> 요소만 적용된다.

실무 팁: 아이디 선택자는 너무 강력한 우선순위를 가지므로, 스타일링보다는 JS 조작 용도로 쓰는 경우가 많다. (스타일은 class 권장)

 

 

 

가상 선택자 (Pseudo-classes)

사용자 액션 기반

a:hover { text-decoration: underline; } 
input:focus { border: 2px solid blue; }

• :hover → 마우스 올렸을 때
• :focus → 입력창에 커서가 들어갔을 때

상태 기반

input:checked { background-color: yellow; } 
button:disabled { opacity: 0.5; }

• :checked → 체크박스/라디오 버튼 선택된 상태
• :disabled / :enabled → 입력 가능 여부

실무 팁: 사용자 경험(UX)을 살리기 위해 hover, focus, disabled는 거의 필수로 사용된다.

 

 

 

속성 선택자 (Attribute selectors)

속성 값에 따라 요소를 선택한다.

/* 정확히 일치 */ 
input[type="text"] { border: 1px solid gray; } 

/* 값이 특정 문자로 시작 */ 
a[href^="https"] { color: green; } 

/* 값이 특정 문자로 끝 */ 
a[href$=".pdf"] { font-weight: bold; } 

/* 값에 특정 문자열 포함 */ 
[class*="btn-"] { padding: 8px; }

실무 팁:
input[type="checkbox"] 등으로 폼 스타일링에 자주 쓰인다.
class*="btn-" 같이 패턴을 활용해 여러 버튼 스타일을 한 번에 지정할 수 있다.

 

 

 

자손 선택자 vs 후손 선택자

자손 선택자 (>)

바로 아래 단계의 요소만 선택한다.

div > p { color: red; }

• <div><p>…</p></div>는 적용되지만
• <div><section><p>…</p></section></div>는 적용되지 않는다.

후손 선택자 (공백)

하위의 모든 단계 요소를 선택한다.

div p { color: blue; }

• <div> 안에 들어 있는 모든 <p>에 적용한다. (중첩 단계 상관 없음)

 

 

 

실무에서 자주 쓰이는 선택자 패턴

• 버튼 스타일링

button, .btn { padding: 10px 20px; border-radius: 8px; }

• 네비게이션 메뉴

nav ul li a:hover { background-color: #eee; }

• 폼 상태 스타일링

input:focus { outline: 2px solid #4a90e2; } 
input:disabled { background: #f0f0f0; }

• 아이콘 버튼 패턴

[class^="icon-"] { width: 24px; height: 24px; }

 

 

정리하자면...

• 기본 선택자: 태그, 클래스, 아이디 (실무에서는 class 중심)
• 가상 선택자: hover, focus, checked, disabled 등 UX 핵심
• 속성 선택자: [attr=value], 패턴 매칭(^, $, *)으로 강력한 스타일링 가능
• 자손/후손 선택자: > vs 공백의 차이 명확히 이해해야 유지보수 쉬움
• 실무 패턴: 버튼, 네비게이션, 폼 스타일링에서 선택자 조합 필수