- 셀렉터
h1 { }
div { }- 전체 셀렉터 (모든 엘리먼트 선택)
* { }- Tag 셀렉터
section, h1 { }- ID 셀렉터
#only { }- class 셀렉터
.widget { }
.center { }- attribute 셀렉터 (암기 ㄴㄴ)
a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }- 후손 셀렉터 (=하위의 셀렉터. 자식 셀렉터 포함)
header h1 {}- 자식 셀렉터 (바로 하위의 셀렉터)
header > p { }- 인접 형제 셀렉터
section + p { }- 형제 셀렉터
section ~ p { }- 가상 클래스
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }- 요소 상태 셀렉터
input:checked + span { }
input:enabled + span { }
input:disabled + span { }- 구조 가상 클래스 셀렉터 (암기 ㄴㄴ)
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 { } // p의 형제 엘리먼트 중 첫번째 p엘리먼트
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }- 부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }- 정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }
https://flukeout.github.io/ -> 게임으로 학습할 수 있음
