JUST GO
[결합자] 결합자 종류 본문
자식 결합자
- 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 부모 선택자" > "자식 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자식 결합자</title>
<style>
body > section {
color: red;
}
</style>
</head>
<body>
<div>
<section>Hi!</section>
</div>
<section>내가 빨간색임</section>
</body>
</html>자손 결합자
- 자손 결합자(Descendant Combinator)는 어떠한 부모 선택자에 대한 자손을 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 부모 선택자" "자손 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자손 결합자</title>
<style>
body section {
color: red;
}
</style>
</head>
<body>
<div>
<section>Hi!</section>
</div>
<section>내가 빨간색임</section>
</body>
</html>일반 형제 결합자
- 일반 형제 결합자(General Sibiling Combinator)는 어떠한 선택자에 대한 형제를 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 선택자" ~ "형제 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 아래 조건을 만족하는 경우 선택한다.
- 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
- 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>일반 형제 결합자</title>
<style>
body > div > i ~ a {
color: red;
}
</style>
</head>
<body>
<div>
<b>주의 사항</b>
<br>
<a>1. 어쩌고</a>
<br>
<a>2. 저쩌고</a>
<br>
<a>3. 그렇고</a>
<br>
<br>
<i>참고 사항</i>
<br>
<a>- 어쩌고</a>
<br>
<a>- 저쩌고</a>
<br>
<a>- 그렇고</a>
</div>
</body>
</html>인접 형제 결합자
- 인접 형제 결합자(Adjacent Sibiling Combinator)는 어떠한 선택자에 대한 인접한 형제를 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다.("는 없는 것으로 한다.)
"어떠한 선택자" + "형제 선택자" {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
- 아래 조건을 만족하는 경우 선택한다.
- 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
- 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인접 형제 결합자</title>
<style>
body > div > i + br + a {
color: red;
}
body > div > b + br + a + br + a {
color: red;
}
</style>
</head>
<body>
<div>
<b>주의 사항</b>
<br>
<a>1. 어쩌고</a>
<br>
<a>2. 저쩌고</a>
<br>
<a>3. 그렇고</a>
<br>
<br>
<i>참고 사항</i>
<br>
<a>- 어쩌고</a>
<br>
<a>- 저쩌고</a>
<br>
<a>- 그렇고</a>
</div>
</body>
</html>'CSS > 학습내용' 카테고리의 다른 글
| [의사클래스] 의사클래스 종류 (0) | 2022.10.03 |
|---|---|
| [선택자] 선택자 종류 (0) | 2022.10.03 |
| [선택자] ID 선택자 (1) | 2022.10.03 |
| [선택자] 클래스 선택자 (0) | 2022.10.03 |
| [속성] grid (0) | 2022.10.03 |