선택자와 우선순위

선택자는 CSS의 출발점입니다. 어떤 요소에 스타일을 적용할지 정확하게 고를 수 있어야 의도한 화면을 만들 수 있습니다. 이 강의에서는 기본 선택자부터 가상 클래스, 가상 요소, 그리고 충돌이 생겼을 때 어떤 규칙이 이기는지를 정리합니다.

학습 목표

• 태그, 클래스, id, 속성, 그룹, 결합자 선택자를 구분해서 사용한다.
• :hover, :nth-child 같은 가상 클래스로 상태와 순서를 다룬다.
• ::before, ::after 가상 요소로 콘텐츠를 추가한다.
• 명시도와 상속을 이해해 스타일 충돌을 예측한다.

기본 선택자

가장 많이 쓰는 세 가지는 태그, 클래스, id 선택자입니다.

p {
  color: #333;
}

.notice {
  background: #fff7e6;
}

#header {
  height: 64px;
}

태그 선택자는 모든 같은 태그에, 클래스(.)는 class 속성에, id(#)는 id 속성에 적용됩니다. id는 페이지에 하나만 존재해야 하므로 스타일 용도로는 클래스를 우선 사용합니다.

속성·그룹·결합자 선택자

속성 선택자는 특정 속성을 가진 요소를 고릅니다. 여러 선택자를 쉼표로 묶으면 그룹 선택자가 됩니다.

input[type="text"] {
  border: 1px solid #ccc;
}

h1, h2, h3 {
  font-weight: 700;
}

결합자는 요소 사이의 관계를 표현합니다.

.card p        { color: #555; } /* 자손: card 안의 모든 p */
.card > p      { margin: 0; }   /* 자식: 바로 아래 p */
.title + p     { margin-top: 4px; } /* 인접 형제 */
.title ~ p     { color: gray; }     /* 일반 형제 */

결합자	의미
A B	A의 모든 후손 B
A > B	A의 직계 자식 B
A + B	A 바로 뒤의 형제 B
A ~ B	A 뒤의 모든 형제 B

가상 클래스

가상 클래스는 요소의 상태나 순서를 기준으로 선택합니다.

a:hover {
  text-decoration: underline;
}

li:nth-child(odd) {
  background: #f4f4f4;
}

input:focus {
  outline: 2px solid #4c8bf5;
}

:nth-child(2n)은 짝수 번째, :nth-child(3n+1)은 1, 4, 7번째처럼 규칙적인 순서를 고를 때 유용합니다.

💡 TIP — :first-child와 :last-child는 목록의 처음과 끝 요소를 다룰 때 자주 쓰입니다. 예를 들어 목록 마지막 항목의 아래 테두리만 제거할 수 있습니다.

가상 요소

가상 요소는 실제 HTML에 없는 콘텐츠를 만들어 붙입니다. 콜론 두 개(::)를 사용합니다.

.badge::before {
  content: "★ ";
  color: gold;
}

.quote::after {
  content: "”";
}

content 속성은 가상 요소에서 반드시 필요하며, 빈 문자열 content: ""로도 장식용 도형을 만들 수 있습니다.

명시도와 우선순위

같은 요소에 여러 규칙이 적용되면 명시도가 높은 쪽이 이깁니다. 명시도는 (id 개수, 클래스/속성/가상클래스 개수, 태그/가상요소 개수)로 계산합니다.

p { color: black; }          /* 0,0,1 */
.text { color: blue; }       /* 0,1,0 → 이김 */
#main .text { color: red; }  /* 1,1,0 → 더 이김 */

선택자	명시도
p	0,0,1
.text	0,1,0
#main	1,0,0
!important	가장 높음

⚠️ 주의 — !important는 명시도를 무시하고 강제로 적용되지만 유지보수를 어렵게 만듭니다. 꼭 필요한 경우가 아니면 사용을 피합니다.

상속

color, font-family 같은 일부 속성은 부모에서 자식으로 자동 상속됩니다. 반면 margin, border, padding은 상속되지 않습니다.

body { color: #222; }
/* body 안의 텍스트는 별도 지정이 없으면 #222를 따른다 */

.box { color: inherit; } /* 명시적으로 부모 값을 따르게 함 */

요약

• 클래스 선택자를 기본으로 쓰고, id는 스타일보다 식별 용도로 사용합니다.
• 결합자( , >, +, ~)로 요소 간 관계를 표현합니다.
• 가상 클래스는 상태/순서를, 가상 요소는 장식 콘텐츠를 다룹니다.
• 충돌은 명시도로 결정되며, color·font 같은 속성은 상속됩니다.

연습문제

1. 클래스가 btn인 요소에 마우스를 올렸을 때 배경을 #eee로 바꾸는 규칙을 작성하세요.
2. nav 안의 직계 자식 a에만 밑줄을 제거하는 규칙을 작성하세요.
3. 목록 li의 짝수 번째 항목에 배경색 #f0f0f0을 주는 규칙을 작성하세요.
4. p, .text, #main .text 세 규칙이 모두 같은 요소의 color를 지정할 때 어떤 색이 적용될까요?

힌트 — 결합자 >는 직계 자식만, 가상 클래스 :hover와 :nth-child의 인자 형식을 떠올리세요. 명시도는 id가 가장 강합니다.