연결 선택자
하위 선택자-지정한 모든 하위 요소에 스타일 적용하기
하위 선택자는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것입니다.
- 자식 요소뿐만 아니라 손자요소,손자의 손자 요소등 모든 하위요소까지 적용됩니다.
- 하위 선택자를 정의할때는 상위 요소와 하위 요소를 공백으로 구분하고 대괄호 안에 속성을 지정합니다.
다음 예는 하위 선택자를 이용해 section요소 안에 있는 모든 p 요소의 글자 색을 파란색으로 지정하는 것입니다.
section p{ color:blue }하위 선태자에 점선 표시하기
<style>
#container ul {
border: 2px dotted blue; /* #container 요소의 모든 하위 ul 요소에 파란 1px 실선 */
margin: 5px;
}
</style>
=====================================================
<body>
<section id="container">
<header><h1>예약 방법 및 요금</h1></header>
<p> 요안도라에 예약하려면?
<ul>
<li> 예약 방법
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
</li>
<li>요금
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</li>
</ul>
</section>
</body>
자식 선택자- 자식 요소에만 스타일 적용하기
하위 요소 전체에 스타일을 적용하는 것이 아니라 자식요소에만 스타일을 적용할 수 있습니다.
-
자식 선택자는 자식 요소에 스타일을 적용하는 선택자로 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분합니다.
-
하위 선택자에서는 자식 요소 뿐만아니라 손자 요소까지 적용되는 반면에, 자식 선택자에서는 바로 아래 요소,자식요소에만 스타일이 적용됩니다.
-
다음 소스는 section 요소 안에 포함된 p요소 중 자식 p요소에만 파란글자 색을 적용한 것입니다.
section > p{ color:blue }인접 형제 선택자 -가장 가까운 형제 요소에 스타일 적용하기
태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 하듯이, 같은 부모 요소를 가지는 형제들을 형제 관계라고 부르고 형제 관계인 요소들에서 먼저 나오는 요소를 '형요소',나중에 나오는 요소를 '동생요소'라고 합니다.
- 인접 형제 선택자는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생요소에만 스타일이 적용됩니다.
- 이 선택자를 정의할 때는 요소1과 요소2사이에 '+'를 표시합니다.
- 요소1과 요소2는 같은 레벨이면서 요소 1이후 맨먼저 오는 요소2에 스타일을 적용합니다.
다음 예는 h1요소 다음에 오는 p 요소들 중 첫 번째 p요소에만 밑줄을 그으라는 것입니다.
h1 + p { text-decoration:underline }
다음 예제는 h1+ul 선택자를 사용해 h1 태그의 형제 요소들 중 맨 먼저 오는 ul요소에 스타일을 적용하는 것입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
h1+ul { /* h1 요소 다음의 첫 번째 ul 요소에 적용할 스타일 */
color:blue; /* 글자색 파랑 */
font-weight:bold; /* 글자 굵게 */
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</section>
</body>
</html>
형제 선택자 - 부모 요소에 스타일 적용하기
형제 선택자도 형제요소들에 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용됩니다.
- 형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소에 '~'를 표시합니다.
- 다음 예는 h1 요소 다음에 오는 모든 형제 p요소에 밑줄을 그으라는 것입니다.
h1 ~ p { text-decoration: underline }다음 예제는 h1~ul스타일을 정의한 것으로 h1요소 다음에 오는 형제 ul요소 모두를 파란색 굵은 글자로 표시하는 것입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
h1~ul {
color:blue; /* 글자색 파랑 */
font-weight:bold; /* 글자 굵게 */
}
</style>
</head>
<body>
<section id="container">
<h1>예약 방법 및 요금</h1>
<ul>
<li>직접 통화</li>
<li>문자 남기기</li>
</ul>
<ul>
<li>1인 : 40,000원</li>
<li>2인 : 60,000원</li>
<li>3인 : 80,000원</li>
<li>4인 : 100,000원</li>
</ul>
</section>
</body>
</html>
