div span { color: red; }
/*
: <div>의 자손 요소인 <span>를 선택하는 선택자
자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분
*/
div > h1 { color: red; }
/*
: <div>의 자식 요소인 <h1>를 선택하는 선택자 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다.
꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관없음
*/
div + p { color: red; }
/*
선택자 사이에 + 기호를 넣는다.
자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없음
인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다.
*/
✅ 문서 구조 관련 선택자는 위의 선택자들을 조합하여 복잡하게 사용할 수 있다.
body > div table + ul { ... }
/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
/* 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소! */
[CSS] 레이아웃 속성 (0) | 2023.04.16 |
---|---|
[CSS] 가상선택자 (0) | 2023.04.13 |
[CSS] CSS 문법과 적용 (0) | 2023.04.10 |
[HTML] 시멘틱 마크업, 블록 & 인라인 (0) | 2023.04.10 |
[HTML] Content Models(콘텐츠 모델) (0) | 2023.04.10 |
댓글 영역