둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지를 지정한다.
선택자를 둘 이상 조합하므로 '조합 선택자' 라고도 하고 '콤비네이션 선택자' 라고도 부른다.
하위 선택자와 자식 선택자 : 하위 요소에 스타일을 적용
특정 요소를 기준을 그 안에 포함된 요소를 하위 요소라고 한다.
그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며,
그 자식 요소의 한 단계 아래는 손자 요소라고 한다.
-하위 선택자
하위 선택자를 사용하면 해당 부모 요소에 포함된 해당 하위 요소를 모두 선택하며 자손 선택자라고도 한다.
하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.
상위요소 하위요소
먼저 하위 선택자를 사용하는 방법을 알아보자.
다음과 같이 section 요소 안에 포함된 p 요소를 모두 선택하려면 section 과 p 사이에 공백 한 칸을 두고 나란히 써주자.
그리고 중괄호 안에 스타일 규칙을 써주자.
다음 예제는 section 요소 안의 p 요소를 모두 파란 글씨로 지정하는 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
section p{
color: blue;
}
</style>
</head>
<body>
<p>section 바깥의 p</p>
<section>
<p>section 안의 p</p>
<div>
<p>section 안의 div 안의 p</p>
</div>
</section>
</body>
</html>
-자식 선택자
하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 다음과 같이 두 요소 사이에 '>' 기호를 표시해 부모와 자식 요소를 구분한다.
부모요소 > 자식요소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
section > p{
color: blue;
}
</style>
</head>
<body>
<p>section 바깥의 p</p>
<section>
<p>section 안의 p</p>
<div>
<p>section 안의 div 안의 p</p>
</div>
</section>
</body>
</html>
인접 형제 선택자와 형제 선택자 : 형제 요소에 스타일을 적용
웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고,
형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.
-인접 형제 선택자
형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 한다.
인접 형제 선택자를 정의할 때는 다음 기본형과 같이 요소1과 요소2 사이에 '+' 기호를 표시한다.
요소1과 요소2는 같은 레벨이면서 요소 1 이후 가장 먼저 오는 요소 2를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
div + p {
color: blue;
}
</style>
</head>
<body>
<p>section 바깥의 p</p>
<section>
<p>section 안의 p-1</p>
<div>
<p>section 안의 div 안의 p</p>
</div>
<p>section 안의 p-2</p>
<p>section 안의 p-3</p>
</section>
</body>
</html>
-형제 선택자
형제 선택자는 형제 요소의 스타일을 정의하는데, 인접 형제 선택자와 달리, 이후에 오는 모든 형제 요소에 적용된다.
형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시한다.
요소1과 형제인 요소2를 모두 선택하는 것이다.
요소1 ~ 요소2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
<style>
div ~ p {
color: blue;
}
</style>
</head>
<body>
<p>section 바깥의 p</p>
<section>
<p>section 안의 p-1</p>
<div>
<p>section 안의 div 안의 p</p>
</div>
<p>section 안의 p-2</p>
<p>section 안의 p-3</p>
</section>
</body>
</html>
'📁Web Developing > CSS 기초' 카테고리의 다른 글
V. 고급선택자 - 3. 가상 클래스와 가상 요소 (0) | 2022.06.06 |
---|---|
V. 고급선택자 - 2. 속성 선택자 (0) | 2022.06.06 |
IV. 배경꾸미기 - 3. 그라데이션 효과로 배경 꾸미기 (0) | 2022.06.06 |
IV. 배경꾸미기 - 2. 배경 이미지 지정하기 (0) | 2022.06.05 |
IV. 배경꾸미기 - 1. 배경색과 배경 범위 지정하기 (0) | 2022.06.04 |
댓글