CSS Selector 기초 정리
- 기본 셀렉터
h1 {}
div {}- 전체 셀렉터
* {}
// 브라우저 초기화
* {
margin: 0;
padding: 0;
}- 다중 선택자
section, h1 {} // 쉼표로 구분- ID 셀렉터
#something {}- class 셀렉터
.someone {}
.anyone {}- 후손 셀렉터(해당 부모 엘리먼트의 모든 자손 엘리먼트들을 선택/ 자식, 손자 등등)
header h1 {} // 띄어쓰기 한 칸으로 표시- 자식 셀렉터(해당 부모 엘리먼트의 직계 자식 엘리먼트만을 선택)
header > p {} // 부등호로 표시- 형제 셀렉터
section ~ p {} // section의 형제 엘리먼트 중 p를 선택- 인접 형제 셀렉터
section + p {} // section과 인접한 모든 p 형제 엘리먼트들을 선택- 부정 셀렉터
input:not([type="something"])
div:not(:nth-of-type(2))- 그 외(구조 가상 클래스 셀렉터: 정확한 의미는 모름)
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }