웹프로그래밍 CSS3/CSS 사용법과 선택자
조합 선택자
별초롱언니
2025. 3. 11. 17:49
▣ 조합 선택자
· 기존의 여러 선택자를 복합적으로 조합하는 방법을 제공
| 구분 | 조합 방법 | 설명 |
| 후손 선택자 | 선택자 A 선택자 B | 선택자 B 가 선택자 A에 반드시 포함되어 있을 경우에 선택한다. |
| 자손 선택자 | 선택자 A > 선택자 B | 부모 선택자 A의 직계 자손인 선택자 B를 선택한다. |
| 인접 형체 선택자 | 선택자 A + 선택자 B | 선택자 A 바로 다음에 위치한 선택자 B를 선택한다. |
| 일반 형제 선택자 | 선택자 A ~ 선택자 B | 선택자 A 뒤에 인접하여 나타나는 모든 선택자 B를 선택한다. |
| 그룹 선택자 | 선택자 A, 선택자 B | 선택자 A와 선택자 B를 모두 선택한다. |
▣ 조합 선택자의 이해
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>후손 선택자 사용하기</title>
<style>
div h2 {
color: yellow;
background-color: purple;
}
div ul {
color: red;
}
</style>
</head>
<body>
<div>
<h2>Descendant Selector_1</h2>
<ul>후손 선택자
<li>자식의 자식 (후손1)</li>
<li>자식의 자식 (후손2)</li>
</ul>
</div>
<h2>Descendant Selector_2</h2>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자손 선택자 사용하기</title>
<style>
body > div > h3 {
color: red;
}
body > p {
color: green;
background-color: yellow;
}
body > h3 > tel > home {
color: blue;
}
</style>
</head>
<body>
<div>
<h3>Child Selector_1</h3>
</div>
<p>자식 선택자</p>
<h3>
<sno>12345</sno>
<std>별초롱</std>
<tel>
<office>02-1235-3821</office>
<home>010-3802-1111</home>
</tel>
</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인접 형제 선택자 사용하기</title>
<style>
h1 + h2 + ul {
color: blue;
}
div + h3 {
color: red;
}
h3 + p {
color: purple;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<h1>인접 형제 선택자1</h1>
<h2>인접 형제 선택자2</h2>
<ul>
<li>주제1</li>
<li>주제2</li>
</ul>
</div>
<h3>Adjacent Selector_1</h3>
<p>인접 형제 선택자에 의한 스타일 적용</p>
<h3>Adjacent Selector_2</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일반 형제 선택자 사용하기</title>
<style>
h1 ~ ul {
color: blue;
}
div ~ h3 {
color: red;
}
h3 ~ p {
color: purple;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<h1>형제 선택자1</h1>
<h2>형제 선택자2</h2>
<ul>목록
<li>주제1</li>
<li>주제2</li>
</ul>
</div>
<h3>Slbling Selector_1</h3>
<h4>같은 레벨 형제</h4>
<p>일반 형제 선택자에 의한 스타일 적용</p>
<h3>Slbling Selector_2</h3>
<h3>Slbling Selector_3</h3>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그룹 선택자 사용하기</title>
<style>
h3, p, h2 {
color : red;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Group Selector_1</h2>
<p>스타일 지정을 그룹으로 적용</p>
<div>
<h3>Group Selector_2</h3>
</div>
</body>
</html>