○ WEB/19.03 FastCampus_CSS
부모,자식,형제 / 자손 선택자, 자식선택자, 인접 형제 선택자
0ver-grow
2019. 7. 23. 17:37
반응형
부모와 자식
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐
자식 요소는 부모 요소와 반대. 되며 자식 요소는 여러 개
html > body > p, div > h1 > span
- <body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
- <div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
- <h1>의 부모 요소: <div> ↔ <div>의 자식 요소: <h1>
- <span>의 부모 요소: <h1> ↔ <h1>의 자식 요소: <span>
- <p>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>
조상과 자손
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개
자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소
html > body > p, div > h1 > span
- <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 > h1 { color: red; }
인접 형제 : div + p { color: red; }
반응형
