상세 컨텐츠

본문 제목

[CSS] 문서 구조 관련 선택자

HTML&CSS

by 겨리! 2023. 4. 10. 00:14

본문

 

✅ 자손 선택자

div span { color: red; }
/* 
: <div>의 자손 요소인 <span>를 선택하는 선택자 
자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분 
*/

 

✅ 자식 선택자

div > h1 { color: red; } 
/* 
: <div>의 자식 요소인 <h1>를 선택하는 선택자 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다. 
꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관없음 
*/

 

✅ 인접 선택자

div + p { color: red; }
/*
선택자 사이에 + 기호를 넣는다.
자식 선택자와 마찬가지로 공백은 있거나 없어도 상관 없음
인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자이다.
*/

 

✅  문서 구조 관련 선택자는 위의 선택자들을 조합하여 복잡하게 사용할 수 있다.

body > div table + ul { ... }

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
/* 요소들이 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소! */

 

 

 

 


학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고  정리한 글입니다.

 

Reference

https://www.boostcourse.org/cs120

 

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

 

 

'HTML&CSS' 카테고리의 다른 글

[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

관련글 더보기

댓글 영역