5.1 선택자 종류
CSS의 결합 선택자는 DOM 트리에서 서로의 위치를 기반으로 요소를 선택할 수 있게 해줘. 이 선택자는 요소의 컨텍스트에 따라 스타일을 지정할 수 있도록 더 정확한 스타일 제어를 제공해. CSS에는 여러 유형의 결합 선택자가 있어: 후손, 자식 요소, 인접 형제 요소, 그리고 일반 형제 요소.
결합 선택자의 종류:
- 후손 선택자 (Descendant Selector)
- 자식 요소 선택자 (Child Selector)
- 인접 형제 요소 선택자 (Adjacent Sibling Selector)
- 일반 형제 요소 선택자 (General Sibling Selector)
5.2 후손 선택자
후손 선택자는 지정된 요소의 모든 후손 요소를 선택해. 후손은 지정된 요소 안에어떠한 중첩 레벨에도 있는 모든 요소야 (이는 단순한 자식뿐만 아니라 손자, 증손자도 포함돼).
문법:
부모 후손 {
속성: 값;
속성: 값;
}
예시:
CSS
/* <div> 내에 있는 모든 <p>를 선택 */
div p {
color: blue;
}
HTML
<div>
<p>이 문장은 파란색으로 표시돼.</p>
<div>
<p>이 문장도 파란색으로 표시돼, 왜냐하면 "div"의 후손이기 때문이지.</p>
</div>
</div>
<p>이 문장은 파란색으로 표시되지 않아.</p>
5.3 자식 요소 선택자
자식 요소 선택자는 직접적인 자식인 요소만 선택해.
문법:
부모 > 자식 {
속성: 값;
속성: 값;
}
예시:
CSS
/* .container의 직접적인 자식인 <p>만 선택 */
.container > p {
color: green;
}
HTML
<div class="container">
<p>이 문장은 녹색으로 표시돼.</p>
<div class="wrapper">
<p>이 문장은 녹색으로 표시되지 않아, 왜냐하면 .container의 직접적인 자식이 아니기 때문이야.</p>
</div>
<p>이 문장은 녹색으로 표시돼.</p>
</div>
<p>이 문장은 녹색으로 표시되지 않아.</p>
5.4 인접 형제 요소 선택자
인접 형제 요소 선택자는 지정된 요소 바로 다음에 오는 요소를 선택해, 그리고 동일한 중첩 레벨에 있어야 해.
문법:
이전 + 다음 {
속성: 값;
속성: 값;
}
CSS
/* <h1> 바로 다음에 오는 <p>를 선택 */
h1 + p {
color: red;
}
HTML
<h1>제목 1</h1>
<p>이 문장은 빨간색으로 표시돼, 왜냐하면 "h1" 바로 뒤에 오기 때문이야.</p>
<p>이 문장은 빨간색으로 표시되지 않아.</p>
5.5 일반 형제 요소 선택자
일반 형제 요소 선택자는 지정된 요소 뒤에 오는 모든 요소를 선택해, 그리고 그 요소들은 동일한 중첩 레벨에 있어야 해.
문법:
이전 ~ 다음 {
속성: 값;
속성: 값;
}
예시:
CSS
/* 동일한 중첩 레벨에서 <h1> 뒤에 오는 모든 <p>를 선택 */
h1 ~ p {
color: purple;
}
HTML
<h1>제목 1</h1>
<p>이 문장은 보라색으로 표시돼.</p>
<p>이 문장도 보라색으로 표시돼.</p>
<div>
<p>이 문장은 보라색으로 표시되지 않아, 왜냐하면 다른 중첩 레벨에 있기 때문이야.</p>
</div>
GO TO FULL VERSION