728x90
✔️ 일반 인접 형제 선택자
일반 형제 선택자(General Sibling Selector)는 CSS에서 특정 요소의 모든 형제 요소를 선택하는 선택자이다. 선택자를 사용하여 특정 요소의 형제 요소 중에서 특정한 형제에 스타일을 적용할 수 있다.
인접 형제 선택자(Adjacent Sibling Selector)는 CSS에서 특정 요소의 바로 뒤에 나오는 형제 요소를 선택하는 선택자이다. 선택자를 사용하여 특정 요소의 바로 뒤에 나오는 형제에 대해 스타일을 적용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일반 형제 선택자</title>
<style>
p + span { color: gold; background-color: deepskyblue;} # 인접 형제 선택자
h3 + p { background-color: deeppink; } # 인접 형제 선택자
h3 ~ p { color: green; } # 일반 형제 선택자
</style>
</head>
<body>
<h2>일반 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
</html>
👇
728x90
'Web > css' 카테고리의 다른 글
| 8. 속성 선택자 (0) | 2024.07.22 |
|---|---|
| 6. 자식 자손 선택자 (0) | 2024.07.22 |
| 5. 그룹 선택자 (0) | 2024.07.22 |
| 4. class 선택자 (0) | 2024.07.19 |
| 3. id 선택자 (0) | 2024.07.19 |
