1. 하위 요소 : 후손 선택자 & 자식 선택자
① 후손 선택자 (하위 선택자)
부모 요소에 포함된 모든 하위 요소를 선택한다.
'부모요소 하위요소' 의 형식 (공백 한 칸)
<style>
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color: pink;
border:1px solid black;
line-height:2;
}
section p { /*section 태그 안의 모든 p 태그에 스타일 적용*/
color:white;
}
</style>
<body>
<section>
<h1>방탈출 카페 테마 & 요금</h1>
<p>
예약은 홈페이지에서 가능합니다.<br>
문의사항은 전화 주세요.
</p>
<div>
<p>공포 테마 : 1인당 2만원</p>
<p>야외 테마 : 1인당 1.5만원</p>
</div>
</section>
</body>
② 자식 선택자
부모 요소의 바로 한 단계 아래 요소인 자식 요소만 선택한다.
'부모요소 > 자식요소' 의 형식
<style>
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color: pink;
border:1px solid black;
line-height:2;
}
section > p { /*section 태그 안의 첫 p 태그에만 스타일 적용*/
color:white;
}
</style>
<body>
<section>
<h1>방탈출 카페 테마 & 요금</h1>
<p>
예약은 홈페이지에서 가능합니다.<br>
문의사항은 전화 주세요.
</p>
<div>
<p>공포 테마 : 1인당 2만원</p>
<p>야외 테마 : 1인당 1.5만원</p>
</div>
</section>
</body>
2. 형제 요소 : 인접 형제 선택자 & 형제 선택자
부모 요소가 같을 경우 그 요소들을 형제 관계라 하고,
먼저 나오는 요소가 형 요소, 나중에 나오는 요소가 동생 요소이다.
① 인접 형제 선택자
형제 요소 중 첫 번째 동생 요소만 선택하는 것
+ 기호로 표시한다.
<style>
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color: pink;
border:1px solid black;
line-height:2;
}
h1 + p { /*(부모가 section인) 형 요소 h1태그의 첫째 동생 요소 p 태그에만 스타일 적용*/
background-color: black;
color:white;
}
</style>
<body>
<section>
<h1>방탈출 카페 테마 & 요금</h1>
<p>
예약은 홈페이지에서 가능합니다.<br>
문의사항은 전화 주세요.
</p>
<p>공포 테마 : 1인당 2만원</p>
<p>야외 테마 : 1인당 1.5만원</p>
</section>
</body>
② 형제 선택자
모든 형제 요소에 스타일 적용
~ 기호로 표시한다.
<style>
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color: pink;
border:1px solid black;
line-height:2;
}
h1 ~ p { /*(부모가 section으로 같은) h1의 형제인 모든 p 태그에 스타일 적용*/
color:blue;
}
</style>
<body>
<section>
<h1>방탈출 카페 테마 & 요금</h1>
<p>
예약은 홈페이지에서 가능합니다.<br>
문의사항은 전화 주세요.
</p>
<p>공포 테마 : 1인당 2만원</p>
<p>야외 테마 : 1인당 1.5만원</p>
</section>
</body>
더보기
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.
'CSS' 카테고리의 다른 글
| 가상 클래스 (1) (0) | 2022.11.18 |
|---|---|
| 속성 선택자 (2) | 2022.11.16 |
| 배경 이미지 지정하기 (0) | 2022.11.15 |
| 웹 요소의 위치 지정하기 (0) | 2022.11.15 |
| 웹 문서의 레이아웃 만들기 (2) | 2022.11.15 |