원하는 요소를 골라내는 기술 — CSS 선택자

"이 특정 문단만 빨갛게 만들고 싶어"

CSS를 처음 배우면 이런 상황이 생깁니다.

<p>이 문단은 검은색</p>
<p>이 문단은 빨간색으로 만들고 싶어!</p>
<p>이것도 검은색</p>

세 개의 <p> 가 있는데 가운데 것만 빨갛게 하려면 어떻게 해야 할까요? p { color: red; } 라고 쓰면 모두 빨개집니다.

이 문제를 해결하는 것이 선택자(Selector) 입니다.

1. 태그 선택자

태그 이름을 그대로 씁니다. 해당 태그 전부에 스타일이 적용됩니다.

h1 { color: navy; }
p { font-size: 16px; }
a { color: orange; }

2. 클래스 선택자 — `.클래스명`

HTML 요소에 class 속성을 주고, CSS에서 .클래스명으로 선택합니다.

HTML:

<p class="highlight">이 문단만 강조됩니다.</p>
<p>이 문단은 기본 스타일</p>
<p class="highlight">이것도 강조됩니다.</p>

CSS:

.highlight {
  color: red;
  font-weight: bold;
}

클래스는 여러 요소에 같은 이름을 사용할 수 있습니다. 하나의 요소에 여러 클래스를 줄 수도 있습니다.

<p class="big bold red">크고 굵고 빨간 텍스트</p>

.big { font-size: 24px; }
.bold { font-weight: bold; }
.red { color: red; }

3. 아이디 선택자 — `#아이디명`

HTML 요소에 id 속성을 주고, CSS에서 #아이디명으로 선택합니다.

HTML:

<h2 id="main-title">메인 제목</h2>

CSS:

#main-title {
  color: purple;
  text-decoration: underline;
}

아이디는 페이지에서 딱 하나만 써야 합니다. 유일한 요소를 선택할 때 씁니다.

클래스 vs 아이디 — 언제 어떤 걸 쓰나?

	클래스 (`.`)	아이디 (`#`)
중복 사용	여러 요소에 같은 이름 가능	페이지에 하나만
용도	스타일 재사용	고유한 요소 지정
우선순위	낮음	높음

실무에서는 클래스를 훨씬 많이 씁니다. 아이디는 JavaScript에서 특정 요소를 찾거나 앵커 링크에 사용하는 경우가 많습니다.

4. 자손 선택자 — 공백으로 연결

특정 요소 안에 있는 요소를 선택합니다.

/* nav 안에 있는 a 태그만 */
nav a {
  color: white;
  text-decoration: none;
}

/* .card 안에 있는 p 태그만 */
.card p {
  font-size: 14px;
  color: gray;
}

5. 가상 클래스 선택자 — `:`

특정 상태나 위치에 있는 요소를 선택합니다.

`:hover` — 마우스를 올렸을 때

button:hover {
  background-color: darkblue;
  color: white;
}

a:hover {
  text-decoration: underline;
}

링크나 버튼 위에 마우스를 올리면 스타일이 바뀝니다. 이 하나만으로도 인터랙티브한 느낌을 줄 수 있어요!

`:first-child` / `:last-child` — 첫 번째 / 마지막 자식

/* ul의 첫 번째 li */
li:first-child {
  font-weight: bold;
}

/* ul의 마지막 li */
li:last-child {
  color: gray;
}

`:nth-child(n)` — n번째 자식

/* 짝수 번째 행에 배경색 (표에서 유용) */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 홀수 번째 */
tr:nth-child(odd) {
  background-color: white;
}

/* 3번째 */
li:nth-child(3) {
  color: red;
}

`:focus` — 입력 상자에 커서가 있을 때

input:focus {
  border-color: blue;
  outline: 2px solid lightblue;
}

6. 전체 선택자 — `*`

페이지의 모든 요소에 적용됩니다.

* {
  box-sizing: border-box;  /* 나중에 배울 중요한 설정 */
  margin: 0;
  padding: 0;
}

선택자 우선순위 (Specificity)

같은 요소에 여러 스타일이 충돌할 때 어떤 게 적용될까요?

<p id="intro" class="highlight">어떤 색이 될까요?</p>

p { color: black; }          /* 태그: 가장 낮음 */
.highlight { color: blue; }  /* 클래스: 중간 */
#intro { color: red; }       /* 아이디: 높음 */

결과: 빨강 — 아이디 선택자가 가장 우선순위가 높습니다.

우선순위 순서:

인라인 style="" > #아이디 > .클래스 > 태그

직접 해보기 ✏️

아래 HTML에 CSS를 추가해 각 조건을 만족하세요.

<ul>
  <li class="important">첫 번째 항목 (빨간색)</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
  <li class="important">네 번째 항목 (빨간색)</li>
  <li>다섯 번째 항목</li>
</ul>

<button>버튼</button>

목표:

important 클래스가 붙은 항목은 빨간색으로
세 번째 항목(nth-child)은 파란색으로
버튼에 마우스를 올리면 배경이 회색으로 바뀌도록

정리

선택자	문법	용도
태그	`h1`, `p`	모든 해당 태그
클래스	`.이름`	같은 스타일 여러 요소에
아이디	`#이름`	페이지에 하나뿐인 요소
자손	`nav a`	특정 요소 안의 자손
hover	`:hover`	마우스 오버 상태
nth-child	`:nth-child(n)`	n번째 자식

다음 편에서는 색상과 배경을 자유자재로 다루는 방법을 배웁니다.

"이 특정 문단만 빨갛게 만들고 싶어"

1. 태그 선택자

2. 클래스 선택자 — .클래스명

3. 아이디 선택자 — #아이디명

클래스 vs 아이디 — 언제 어떤 걸 쓰나?

4. 자손 선택자 — 공백으로 연결

5. 가상 클래스 선택자 — :

:hover — 마우스를 올렸을 때

:first-child / :last-child — 첫 번째 / 마지막 자식

:nth-child(n) — n번째 자식

:focus — 입력 상자에 커서가 있을 때

6. 전체 선택자 — *