[CSS] Selector (기타)

#가상클래스 셀렉터
a: link { }  //사용자가 방문하지 않은 a요소를 선택한다
a: visited { } // 사용자가 방문한 a요소를 선택한다
hover : 마우스를 요소위에 올렸을때
active: 활성화된(클릭된) 상태일때 
focus: 포커스가 들어와있을때

#UI 요소 상태 셀렉터
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 { }
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 { }

---

p:first-child {...}
first-child는 p엘리먼트중에서 첫번째자식 엘리먼트를 선택한다.

ul > li:last-child{...}
ul의 자식 엘리먼트 중에서 마지막 자식 엘리먼트가 li인것을 선택한다.

ul > li:nth-child(3) {...}
ul의 자식 엘리먼트 중에서 세번째 자식 엘리먼트가 li인것을 선택한다.

section > p:nth-child(2n+1) {...}
section의 자식 엘리먼트 중에서 홀수번째 자식 엘리먼트가 p인것을 선택한다.

div: last-child {...}
div 엘리먼트 중 마지막 자식 엘리먼트 모두를 선택한다.

div:nth-last-child(2) {...}
형제 엘리먼트 중에서, 마지막에서 두번째 엘리먼트가 div인것을 선택한다.

p:first-of-type {...}
p엘리먼트의 형제 엘리먼트 중 첫번째 p엘리먼트를 선택한다.

div:last-of-type {...}
div엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택한다.

p:not(#only) {...}
p엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택한다.