CSS에서 Combinators는 선택자를 결합하여 HTML 문서 내의 요소를 상대적으로 선택하는 방법을 제공합니다. 이 결합자는 다음과 같이 네 가지로 나뉩니다
- 자식 선택자 (>)
- 자손 선택자 ( )
- 인접 형제 선택자 (+)
- 일반 형제 선택자 (~)
선택자(Selector) 결합하여 사용하는 방법
선택자(Selector) 결합하여 사용하는 방법
위의 목차를 클릭하면 해당 글로 자동 이동 합니다.
HTML 코드 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Combinators 예제</title>
<style>
/* 1. 자식 선택자 (>) */
div > p {
color: red;
}
/* 2. 자손 선택자 (공백) */
div p {
background-color: yellow;
}
/* 3. 인접 형제 선택자 (+) */
h2 + p {
font-style: italic;
}
/* 4. 일반 형제 선택자 (~) */
h3 ~ p {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>이 문단은 div의 자식입니다. (빨간색, 노란 배경)</p>
<section>
<p>이 문단은 div의 자손입니다. (노란 배경)</p>
</section>
</div>
<h2>이것은 h2 제목입니다.</h2>
<p>이 문단은 h2의 인접 형제입니다. (기울임꼴)</p>
<p>이 문단은 h2의 일반 형제입니다. (기본 스타일)</p>
<h3>이것은 h3 제목입니다.</h3>
<p>이 문단은 h3의 일반 형제입니다. (밑줄)</p>
<p>이 문단도 h3의 일반 형제입니다. (밑줄)</p>
</body>
</html>
코드 설명
1) 자식 선택자 (>)
div > p {
color: red;
}- div 요소의 직계 자식인 <p> 요소를 선택합니다.
- 예제에서 <div> 바로 안에 있는 <p>는 빨간색으로 표시됩니다.
2) 자손 선택자 ( )
div p {
background-color: yellow;
}- div 요소의 모든 자손인 <p> 요소를 선택합니다.
- 예제에서 <div> 안에 있는 모든 <p>는 노란 배경색으로 표시됩니다.
3) 인접 형제 선택자 (+)
h2 + p {
font-style: italic;
}- h2 요소의 바로 다음 형제인 <p> 요소를 선택합니다.
- 예제에서 h2 바로 다음에 있는 <p>는 기울임꼴로 표시됩니다.
4) 일반 형제 선택자 (~)
h3 ~ p {
text-decoration: underline;
}- h3 요소의 모든 다음 형제인 <p> 요소를 선택합니다.
- 예제에서 h3 뒤에 있는 모든 <p>는 밑줄이 그어집니다.
결합 선택자의 특징
| 결합자 | 설명 | 예제 |
| 자식 선택자 (>) | 부모의 직계 자식 요소 선택 | div > p |
| 자손 선택자 ( ) | 부모의 모든 자손 요소 선택 | div p |
| 인접 형제 선택자 (+) | 바로 다음 형제 요소 선택 | h2 + p |
| 일반 형제 선택자 (~) | 모든 다음 형제 요소 선택 | h3 ~ p |
반응형
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| CSS - 스타일이 잘 안 먹힐 때 구체성 때문이다 (0) | 2025.03.19 |
|---|---|
| CSS - 속성 선택자(Selector) 7가지 사용방법 (0) | 2025.03.19 |
| CSS - Class 선택자 사용 (0) | 2025.03.18 |
| CSS - Type 선택자 사용 (0) | 2025.03.18 |
| HTML5 - 테이블(Table) 목록 표현 방법 (0) | 2025.03.18 |