1. 결합 선택자의 종류
CSS 결합 선택자는 다른 요소와의 계층적 위치에 따라 요소를 선택할 수 있어. 이 기능은 컨텍스트에 따라 요소에 스타일을 적용해야 하거나 복잡한 구조에서 요소를 스타일링할 때 유용하지. 결합 선택자는 클래스나 아이디만으로는 부족할 때 정확한 선택을 가능하게 하는 강력한 도구야. CSS에서 주요 결합 선택자의 종류는 하위 선택자, 자식 요소 선택자, 인접 형제 선택자, 일반 형제 선택자를 포함해.
CSS 결합 선택자는 HTML의 계층 구조를 기반으로 다양한 요소 선택 방식을 제공해. 주요 결합 선택자의 종류는:
- 하위 선택자 (Descendant Selector): 어떤 깊이든 부모 요소 안에 있는 모든 요소를 선택.
- 자식 요소 선택자 (Child Selector): 특정 요소의 직접적인 (즉시하는) 자식 요소만 선택.
- 인접 형제 선택자 (Adjacent Sibling Selector): 동일한 계층에서 다른 요소 바로 다음에 오는 요소를 선택.
- 일반 형제 선택자 (General Sibling Selector): 지정한 요소 이후의 동일한 계층에 있는 모든 형제 요소를 선택.
이 선택자들은 각각 다양한 상황에 적합하며 페이지에서 요소의 위치에 따라 정확히 선택할 수 있도록 도와줘.
2. 하위 선택자 (Descendant Selector)
하위 선택자는 요소 안에 있는 모든 요소를 선택하며, 계층의 깊이와 상관없이 적용돼. 선택자들 사이에 공백을 통해 작성돼. 이 선택자는 특정 클래스 안에 있는 모든 <p> 요소 같은 요소를 스타일링할 때 유용해.
.container p {
color: blue;
}
<div class="container">
<p>이 텍스트는 파란색이 될 거야, 왜냐하면 컨테이너 안에 있어.</p>
<div>
<p>이 텍스트도 파란색이야.</p>
</div>
</div>
<p>이 텍스트는 바뀌지 않아, 왜냐하면 컨테이너 밖에 있어.</p>
여기서 선택자 .container p는 클래스 container 안에 있는 모든 <p> 요소를 선택해. 계층의 깊이와 상관없이.
3. 자식 요소 선택자 (Child Selector)
자식 요소 선택자는 특정 요소의 직접적인 자식을 선택해. 선택자들 사이에 >를 사용해서 작성돼. 이 선택자는 오직 최상위 단계 요소만 스타일링하고 더 깊은 계층의 요소는 제외하고 싶을 때 유용해.
.container > p {
font-weight: bold;
}
<div class="container">
<p>이 텍스트는 볼드체가 될 거야.</p>
<div>
<p>이 텍스트는 변화가 없어, 왜냐하면 container의 직접적인 자식이 아니야.</p>
</div>
</div>
여기서 첫 번째 <p>만 볼드체가 될 거야, 왜냐하면 .container의 직접적인 자식이야. 중첩된 <p>는 변화가 없어.
4. 인접 형제 선택자 (Adjacent Sibling Selector)
인접 형제 선택자는 동일한 계층에 있는 다른 요소 바로 다음에 오는 요소를 선택해. 선택자들 사이에 +를 사용해서 작성돼. 이건 바로 앞의 요소를 기준으로 스타일을 적용할 때 유용해, 예를 들어 제목 바로 뒤에 오는 첫 번째 문단에 스타일을 적용할 때.
h2 + p {
color: green;
}
<h2>제목</h2>
<p>이 텍스트는 초록색이 될 거야, 왜냐하면 제목 바로 뒤에 있어.</p>
<p>이 텍스트는 변화가 없어, 왜냐하면 h2의 인접 요소가 아니야.</p>
선택자 h2 + p는 오직 제목 <h2> 바로 뒤에 오는 첫 번째 <p>의 색깔만 변경해.
5. 일반 형제 선택자 (General Sibling Selector)
일반 형제 선택자는 동일한 계층에 있는 이후의 모든 형제 요소를 선택해. 지정된 요소 바로 뒤에 오는지 상관없이 적용돼. 선택자들 사이에 ~를 사용해서 작성돼.
h2 ~ p {
font-style: italic;
}
<h2>제목</h2>
<p>이 문단은 이탤릭체가 될 거야.</p>
<div>
<p>이 문단도 이탤릭체가 될 거야, 왜냐하면 h2의 일반 형제야.</p>
</div>
이 예에서 선택자 h2 ~ p는 제목 <h2> 이후의 동일한 계층의 모든 <p> 요소를 선택해.
6. 결합 선택자의 전체 사용 예시
아래는 페이지에서 위치에 따라 다양한 요소를 선택하기 위해 모든 결합 선택자를 사용하는 HTML과 CSS 예제야.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title>CSS 결합 선택자 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>이 문단은 .container 안의 하위 및 자식 요소야.</p>
<div>
<p>이 문단은 .container 안의 하위 요소이지만 자식 요소가 아니야.</p>
</div>
</div>
<h2>제목</h2>
<p>이 문단은 h2의 인접 형제야.</p>
<div>이 블록은 이후의 문단에 영향을 주지 않아.</div>
<p>이 문단은 h2의 일반 형제야.</p>
</body>
</html>
/* 하위 선택자 */
.container p {
color: blue;
}
/* 자식 요소 선택자 */
.container > p {
font-weight: bold;
}
/* 인접 형제 선택자 */
h2 + p {
color: green;
}
/* 일반 형제 선택자 */
h2 ~ p {
font-style: italic;
}
GO TO FULL VERSION