관계 선택자
선택자 종류 | 정의 | 기호 | 예시 코드 |
종속 선택자 | 기본 선택자에 추가하여 특정 범위 내에서 특정 클래스나 아이디 등으로 제한하는 선택자 | 태그.클래스명 또는 태그#아이디 | div.title { color: blue; } |
하위 선택자 | 부모 요소 내에 존재하는 모든 하위 요소를 선택 | 선택자 선택자 | div p { color: gray; } |
자식 선택자 | 부모 요소의 직계 자식만을 선택 | 부모 선택자 > 자식 선택자 | ul > li { color: blue; } |
인접 선택자 | 특정 요소 바로 다음에 위치한 형제 요소를 선택 | 선택자1 + 선택자2 | h1 + p { margin-top: 10px; } |
형제 선택자 | 특정 요소 이후에 나오는 모든 형제 요소를 선택 | 선택자1 ~ 선택자2 | h1 ~ p { color: orange; } |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>관계 선택자</title>
<style>
article { border: 3px solid orange; }
aside { border: 3px solid hotpink; margin: 10px; }
/* 하위 선택자 */
/* - 해당 요소 내부에 있는 요소를 선택 */
/* * (요소) (요소) : 띄어쓰기로 한 계층을 구분 */
article section ul {
color: red;
}
/* 자식 선택자 */
/* - 바로 밑의 하위 요소만을 선택 */
/* (기호 : > ) */
article > section > ul {
color: blue;
}
/* 인접 선택자 */
/* A + B : A와 인접한 요소 B를 선택 */
/* - A 요소 다음(뒤)에 나오는 요소만 인식 */
h1 + h3 {
color: cornflowerblue;
font-size: 30px;
}
/* 형제 선택자 */
/* A ~ B : 같은 부모를 갖는 A와 형제요소인 B를 선택 */
article ~ article h2 {
color: white;
background-color: rebeccapurple;
padding: 5px;
}
/* 형제요소인 선택자~스타일적용할 선택자 */
p ~ span {
color: hotpink;
}
</style>
</head>
<body>
<h1>관계 선택자</h1>
<header>
<!-- .logo{로고} -->
<div class="logo">로고</div>
<!-- ul(li{메뉴$}*2) -->
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</header>
<article>
<h1>제목</h1>
<h3>설명</h3>
<section>
<h2>부제목</h2>
<!-- ul>(li{리스트 $})*3 -->
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3</li>
</ul>
</section>
<!-- aside>(h2{사이드바 제목}+h3{설명}+section>(ul>(li{사이드 메뉴 $})*3)) -->
<aside>
<h2>사이드바 제목</h2>
<h3>설명</h3>
<section>
<ul>
<li>사이드 메뉴 1</li>
<li>사이드 메뉴 2</li>
<li>사이드 메뉴 3</li>
</ul>
</section>
</aside>
</article>
<article>
<h1>제목1</h1>
<h2>소제목1</h2>
<section>내용1</section>
<h2>소제목2</h2>
<section>내용2</section>
<h2>소제목3</h2>
<section>내용3</section>
<p>p - 형제 자매 요소</p>
<span>span - 형재 자매 요소</span>
<p>p - 형제 자매 요소</p>
<span>span - 형재 자매 요소</span>
<p>p - 형제 자매 요소</p>
<span>span - 형재 자매 요소</span>
</article>
<article>
<h2>article ~ article(뒤에만 적용)</h2>
</article>
<div style="height: 500px;"></div>
</body>
</html>
HTML
복사