복합선택자가 중요한 이유!!
복합 선택자를 사용하면 특정 부모 요소 안에 있는 태그나, 특정 태그 이후에 나오는 요소들만 스타일링할 수 있다.
복합 선택자 종류
- 하위 선택자는 특정 요소 안에 있는 모든 요소를 선택한다.
- 자식 선택자는 부모의 바로 아래에 있는 요소만 선택한다.
- 인접 형제 선택자는 특정 요소 바로 뒤의 형제 요소 하나만 선택한다.
- 일반 형제 선택자는 특정 요소 뒤에 나오는 모든 형제 요소를 선택한다.
실습 예제 (HTML 코드)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>과일 목록</h2>
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
<p>과일은 맛있다</p>
<ul>
<li>오렌지</li>
<li>포도</li>
</ul>
</div>
</body>
</html>
실습 예제 (CSS 코드)
/* (1) 하위 선택자 (div 안에 있는 모든 ul 태그 선택) */
.container {
border: 2px solid black;
}
/* (2) 자식 선택자 (div의 직계 자식 ul만 선택) */
.container > ul {
border: 1px solid black;
}
/* (3) 인접 형제 선택자 (h2 바로 뒤에 오는 ul 하나만 선택) */
h2 + ul {
background-color: lightcoral;
}
/* (4) 일반 형제 선택자 (h2 뒤에 오는 모든 ul 선택) */
h2 ~ ul {
color: red;
}
| 선택자 | 예제 | 설명 |
| 하위선택자 (, 공백) | .container ul | .container 내부의 모든 <ul> 요소를 선택 |
| 자식 선택자 (>) | .container > ul | .container 내부의 직계 자식 <ul> 요소만 선택 |
| 인접 형제 선택자 (+) | h2 + ul | <h2> 바로 다음에 오는 <ul> 하나만 선택 |
| 일반 형제 선택자 (~) | h2 ~ ul | <h2> 이후에 나오는 모든 <ul> 선택 |
'개발 개념 정리 > html, css' 카테고리의 다른 글
| [ HTML ] 시맨틱(semantic) 태그란? HTML 코드의 가독성 높이기! (0) | 2025.03.15 |
|---|---|
| [ HTML ] map 태그를 알아보자! (0) | 2025.03.14 |
| [ HTML ] 비디오 & 오디오 속성 (0) | 2025.03.14 |
| [ HTML ] iframe이란 무엇인가? (1) | 2025.03.14 |
| [ HTML ] action, method, target, novalidate <form> 태그 속성 (0) | 2025.03.14 |
