Frontend/CSS

CSS 선택자(Selector) 완벽 가이드: 원하는 요소만 콕 집어 꾸미기

미니임 2026. 2. 10. 00:51

 

웹 디자인의 핵심은 내가 원하는 요소를 얼마나 정확하게 선택해서 스타일을 입히느냐에 달려 있습니다. CSS 선택자를 제대로 활용하면 HTML 구조를 수정하지 않고도 정교한 레이아웃과 디자인을 완성할 수 있습니다.

기초부터 심화까지, 실무에서 바로 쓸 수 있는 예제와 함께 CSS 선택자의 세계를 파헤쳐 보겠습니다.

1. 가장 기본이 되는 '기본 선택자'

기본 선택자는 가장 자주 쓰이며 직관적입니다.

전체 선택자 (*)

페이지의 모든 요소에 스타일을 적용합니다. 주로 마진이나 패딩을 초기화할 때 사용합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

태그 선택자 (Type Selector)

특정 HTML 태그 전체를 선택합니다.

p {
  line-height: 1.6;
  color: #333;
}

클래스 선택자 (.className)

특정 클래스 속성을 가진 요소를 선택합니다. 재사용성이 가장 높습니다.

.btn-primary {
  background-color: blue;
  color: white;
  border-radius: 5px;
}

아이디 선택자 (#idName)

페이지 내에서 단 하나뿐인 고유한 요소를 선택할 때 사용합니다. (우선순위가 매우 높으므로 주의해서 사용해야 합니다.)

#main-navigation {
  background-color: #f8f9fa;
  border-bottom: 1px solid #ddd;
}

2. 관계를 이용한 '복합 선택자'

요소 간의 부모, 자식, 형제 관계를 이용하여 선택 범위를 좁힙니다.

자식 선택자 (A > B)

부모 요소(A) 바로 아래에 있는 자식 요소(B)만 선택합니다.

/* ul 바로 밑에 있는 li만 선택 (중첩된 li는 제외) */
ul > li {
  list-style: none;
}

후손 선택자 (A B)

부모 요소(A) 안에 포함된 모든 하위 요소(B)를 선택합니다.

/* section 태그 안의 모든 p 태그를 선택 */
section p {
  margin-bottom: 20px;
}

인접 형제 선택자 (A + B)

A 바로 다음에 오는 첫 번째 형제 B만 선택합니다.

/* h1 바로 뒤에 오는 p 태그만 상단 여백을 줌 */
h1 + p {
  margin-top: 10px;
}

일반 형제 선택자 (A ~ B)

A 뒤에 오는 모든 형제 B를 선택합니다.

/* h2 뒤에 있는 모든 div를 선택 */
h2 ~ div {
  background-color: #eee;
}

3. 속성을 이용한 '속성 선택자'

HTML 태그가 가진 속성 값에 따라 요소를 선택합니다.

  • [attr]: 특정 속성이 있는 요소
  • [attr="value"]: 속성 값이 정확히 일치하는 요소
  • [attr^="value"]: 속성 값이 특정 문자열로 시작하는 요소
/* 비밀번호 입력창만 선택 */
input[type="password"] {
  border: 2px solid red;
}

/* 링크 주소가 https로 시작하는 요소에 아이콘 표시 */
a[href^="https"] {
  color: green;
  font-weight: bold;
}

4. 상태를 감지하는 '가상 클래스 선택자' (Pseudo-classes)

사용자의 동작이나 요소의 특정 상태를 기반으로 스타일을 적용합니다.

인터랙션 관련

  • :hover: 마우스를 올렸을 때
  • :focus: 포커스가 맞춰졌을 때 (input 등)
  • :active: 클릭하고 있는 순간
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

순서 관련 (구조적 가상 클래스)

  • :first-child: 첫 번째 자식 요소
  • :last-child: 마지막 자식 요소
  • :nth-child(n): n번째 자식 요소 (2n은 짝수, 2n-1은 홀수)
/* 리스트의 홀수 번째 항목에만 배경색 적용 */
li:nth-child(odd) {
  background-color: #f9f9f9;
}

5. 내용을 생성하는 '가상 요소 선택자' (Pseudo-elements)

HTML 소스에는 없지만 CSS로 특정 부분에 가상의 요소를 삽입하거나 스타일을 입힙니다.

  • ::before: 요소의 내용 앞에 가상 요소 추가
  • ::after: 요소의 내용 뒤에 가상 요소 추가
/* 필수 입력 항목 앞에 빨간 점 추가 */
.required::before {
  content: "*";
  color: red;
  margin-right: 4px;
}

/* 링크 뒤에 (새창) 텍스트 추가 */
.external-link::after {
  content: "(Open in new window)";
  font-size: 0.8rem;
  color: #888;
}

CSS 선택자 우선순위 (Specificity)

여러 선택자가 한 요소를 가리킬 때, 어떤 스타일이 적용될까요? 점수가 높을수록 우선 적용됩니다.

  1. !important: (무적, 가급적 지양)
  2. 인라인 스타일: (1000점)
  3. 아이디 선택자: (100점)
  4. 클래스/가상 클래스/속성 선택자: (10점)
  5. 태그/가상 요소 선택자: (1점)
  6. 전체 선택자: (0점)

Tip: 선택자를 너무 길게 작성(body div section ul li a)하면 성능에 영향을 주고 유지보수가 힘들어집니다. 가급적 클래스 이름을 의미 있게 짓고 적절한 깊이로 선택하는 것이 좋습니다.

CSS 선택자는 단순히 스타일을 입히는 도구를 넘어, 코드의 구조를 깔끔하게 유지하게 도와주는 핵심 기술입니다. 오늘 배운 다양한 선택자들을 조합해 더 효율적인 웹 퍼블리싱을 경험해 보세요!

반응형