FrontEnd/CSS
[CSS] 자식 선택자, 하위 선택자
2021. 5. 8. 16:25반응형
CSS에서 후손이란 말은 특정 태그에 종속되어 있는 모든 하위 요소들을 의미합니다. 위 구조에서 html 태그의 후손에 해당하는 태그들인 <head><body><h1><div> 태그들에 이에 해당합니다.
자식 태그의 경우는 특정 태그에 종속되면서 바로 한 단계 아래에 해당하는 요소들을 의미합니다. 위 그림에서 body 태그의 자식 태그들은 <h1><div> 태그를 의미합니다. 물론 이 두 개의 태그는 html의 후손 태그이기도 합니다.
이러한 개념을 CSS 선택자에 적용하여 선택자를 지정할 수 있는 것이 바로 하위 선택자와 자식 선택자가 됩니다. 아래 샘플 예제를 참조 바랍니다.
자식선택자
▼ body > div { border : 2px solid black;} Rule Set은 <body>태그의 자식 요소에 해당하는 태그들 중에서 div 태그를 선택하여 border을 설정하라는 의미입니다.
하위선택자
▼ #content p { color : red;} RuleSet은 태그 id 값이 content의 후손 요소에 해당하는 태그들 중에서 p 태그의 color 속성값을 red로 설정하라는 의미로 해석이 됩니다.
출처/참고자료
반응형
'FrontEnd > CSS' 카테고리의 다른 글
| [CSS] @media query, 미디어 쿼리 이해 (반응형) (0) | 2022.02.04 |
|---|---|
| [CSS] 예제로 배우는 @media query, 미디어 쿼리 이해 (0) | 2022.02.04 |
| [CSS] 엘리먼트 혹은 태그들을 가운데 정렬하기 (0) | 2021.12.06 |
| [CSS] font에 관한 CSS들 (0) | 2021.06.09 |
| [CSS] 테두리 라운드 형태로 하기 (0) | 2021.04.13 |