코드 그라데이션
11. 연결 선택자 본문
연결 선택자
- 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정하는 역할을 수행
하위 요소
- 특정 요소를 기준으로 그 안에 포함된 요소를 의미
자식 요소
- 현재 요소를 기준으로 바로 한 단계 아래 요소
손자 요소
- 자식 요소의 한 단계 아래 요소
* 연결 선택자의 종류와 설명
1) 하위 선택자 (= 자손 선택자)
- 부모 요소에 포함된 하위 요소를 모두 선택
- 자식 요소 뿐만 아니라, 손자 요소, 손자의 손자요소 등 모든 요소들까지...
- 상위 요소와 하위 요소를 공백으로 구분한다.
예제 - 모든 하위요소에 글자색 빨간색으로 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>고급 선택자 모든 하위요소</title>
<style>
body {
background-color:#eee;
}
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
line-height:2;
}
section p { /* section 요소의 모든 하위 p 요소에 적용 */
color:red; /* 글자색을 빨간색으로 */
}
</style>
</head>
<body>
<section>
<h1>aaaaaaaaaaaaaaa</h1>
<p>bbbbbbbbbbbbbbbbbbb</p>
<div>
<p>ccccccccccccccccccccc</p>
<p>dddddddddddddddddd</p>
</div>
</section>
</body>
</html>
실행 결과
2) 자식 선택자
- 하위 선택자와 다르게 자식 요소에만 스타일을 적용
- 두 요소 사이에 > 기호를 표시해 부모 요소와 자식 요소를 구분한다.
예제 - 자식 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자식 선택자에게만 적용</title>
<style>
body {
background-color:#eee;
}
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
line-height:2;
}
section > p { /* section 요소에 포함된 p 요소 중에서 자식에게만 적용 */
color:red; /* 글자색을 빨간색으로 */
}
</style>
</head>
<body>
<section>
<h1>aaaaaaaaaaaaaaa</h1>
<p>bbbbbbbbbbbbbbbbbbb</p>
<div>
<p>ccccccccccccccccccccc</p>
<p>dddddddddddddddddd</p>
</div>
</section>
</body>
</html>
실행 결과
3) 인접 형제 선택자
- 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것.
- 요소1 과 요소2 사이에 + 로 표기
- 요소1 과 요소2 는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소 2를 선택
ex. h1 요소와 형제인 p 요소 중에서 첫 번째 p 요소만 선택하여 글자를 파란색으로 적용하는 방법
예제 - h1 요소와 형제인 p 요소 중에서 첫 번째 p 요소의 배경색과 글자색을 바꾸기
실행 결과
4) 형제 선택자
- 모든 형제 요소에 적용
- 두 요소 사이에 ~ 기호를 표시해 요소1 과 요소2 를 모두 선택한다
ex. h1 요소 뒤에 오는 모든 형제 p 요소의 글자를 파란색으로 적용하는 방법
예제 - h1요소의 형제인 p요소를 모두 선택해 모든 형제 요소의 글자색과 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>형제 선택자</title>
<style>
body {
background-color:#eee;
}
section {
width:600px;
margin:20px auto;
}
p {
width:500px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
line-height:2;
}
h1 ~ p { /* h1 요소의 형제인 p 요소 모두에 적용 */
background-color: yellow;
color:red; /* 글자색을 빨간색으로 */
}
</style>
</head>
<body>
<section>
<h1>aaaaaaaaaaaaaaa</h1>
<p>bbbbbbbbbbbbbbbbbbb</p>
<p>eeeeeeeeeeeeeeeeeee</p>
<p>fffffffffffffffffff</p>
<div>
<p>ccccccccccccccccccccc</p>
<p>dddddddddddddddddd</p>
</div>
</section>
</body>
</html>
실행 결과
728x90
'Front > Mega-CSS' 카테고리의 다른 글
| 13. 가상 클래스와 가상 요소 (0) | 2023.05.17 |
|---|---|
| 12. 속성 선택자 (0) | 2023.05.16 |
| 10. 색 그라데이션 (0) | 2023.05.14 |
| 9. 배경색과 배경 이미지 (0) | 2023.05.14 |
| <중요> 8. 웹 문서 레이아웃, 위치 (0) | 2023.05.14 |
'Front/Mega-CSS' Related Articles
more
Comments