Rainbow
부모 선택자/자식 선택자/자손 선택자에 대해 본문
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
부모와 자식
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다.
자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다.
- <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
- <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
- <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
- <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
조상과 자손
조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다.
정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니다.
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소입니다.
- <body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
- <div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
- <h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>
- <span>의 조상 요소: <html>, <body>, <div>, <h1> ↔ <h1>의 자손 요소: <span>
- <p>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
자손 선택자
div span { color: red; }
자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.
이 선택자는 <div>의 자손 요소인 <span>를 선택하는 선택자 입니다.
자식 선택자
div > h1 { color: red; }
자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다.
꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없습니다.
이 선택자는 <div>의 자식 요소인 <h1>를 선택하는 선택자 입니다.
인접 형제 선택자
div + p { color: red; }
인접 형제 선택자는 선택자 사이에 + 기호를 넣습니다.
자식 선택자와 마찬가지로 공백은 있거나 없어도 상관이 없습니다.
인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자입니다.
'web > css' 카테고리의 다른 글
| CSS의 추가 기능 (0) | 2020.11.26 |
|---|---|
| 가상 클래스 / 가상 요소 선택자 (0) | 2020.11.26 |
| css 선택자 이해 (0) | 2020.11.04 |
| css에서 자주 사용되는 속성 (0) | 2020.11.04 |
| box-sizing 차이점 (0) | 2020.11.03 |
