TIL : CSS Selector

이미 CSS TIL을 작성할 때 기본적인 셀렉터로 #과 .에 대해 다뤘었다. 그러나 이건 정말 기본적인 셀렉터이고 twittler 목업을 구현하면서 배운 셀렉터에 대해 더 다뤄보려고 한다.

---

전체 셀렉터

* {}
//자식 셀렉터에도 사용할 수 있다.

Tag 셀렉터

A, B {}

id 셀렉터

#idname {}

class 셀렉터

.classname {}

attribute 셀렉터 (참고)

A [attr] //특정 속성을 갖는 모든 요소 선택
A [attr=value] //지정값과 속성값이 일치하는 모든 요소 선택
A [attr~=value] //띄어쓰기로 구분되었을 때, 〃
A [attr|=value] //하이픈(-)으로 구분되었을 떄, 〃
A [attr^=value] //속성값 중 지정값으로 시작하는 모든 요소 선택
A [attr$=value] //속성값 중 지정값으로 끝나는 모든 요소 선택
A [attr*=value] //속성값 중 지정값을 포함하는 모든 요소 선택

후손 셀렉터 : 자식, 손자, 그 이후 후손 포함

A B {}

자식 셀렉터 : 직계 자식만 포함

A > B {}

인접 형제 셀렉터 : 같은 부모를 가지고, A 바로 뒤에 오는 B에만 적용

A + B {}

형제 셀렉터 : 같은 부모를 가지고, A 뒤에 오는 B에 적용 (바로 뒤에 올 필요 X)

A ~ B {}

가상 클래스 / 의사 클래스 : 어떤 상태를 지정

a:link { } //방문 전 링크
a:visited { } //방문 후 링크
a:hover { } //마우스를 위에 올린 상태
a:active { } //마우스로 클릭한 상태
a:focus { } //요소에 초점이 맞춰진 상태

요소 상태 셀렉터

인접 형제 셀렉터인 +를 합쳐 사용할 수 있다.
input:checked + span { } //checked 상태
input:enabled + span { } //enabled(선택, 클릭, 입력, 포커스 가능) 상태
input:disabled + span { } //disabled(〃 불가능) 상태

구조 가상 클래스 셀렉터 (참고) : 다른 요소와의 상대적 위치에 따라 설정

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) { }

부정 셀렉터 : B가 아닌 모든 A의 요소에 적용

A:not(B) {} //B에는 다른 부정선택자나, 가상 요소를 넣을 수 없다.

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }