형제 선택자
1. +
2. ~
1. 형제 선택자 +
인접 형제 선택자는 요소의 바로 다음에 있는 형제 요소를 선택한다.
2. 형제 선택자 ~
형제 선택자는 모든 형제 요소를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>형제선택자</title>
<style>
ul {list-style: none;}
.list {height:50px; background:indianred;}
.list + li {height:50px; background:gray;}
.list ~ li {background:seagreen;}
h2 + ul {display:none;}
h2:hover + ul {display:block;}
</style>
</head>
<body>
<!-- 메뉴 생성 -->
<h2>메뉴</h2>
<ul>
<li class="list"><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 반응선택자 (0) | 2022.09.27 |
|---|---|
| [HTML+CSS3] 구조선택자 (0) | 2022.09.27 |
| [HTML+CSS3] 상태 선택자, 속성 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 자식+후손 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 기본 선택자 (0) | 2022.09.26 |