[CSS] CSS Selectors Reference 정리

.class (.intro)	클래스가 intro인 요소들을 모두 선택
.class1.class2 (.name1.name2)	클래스가 name1과 name2로 설정된 모든 요소를 선택
.class1 .class2 (.name1 .name2)	name1 클래스 내의 name2 클래스를 가진 요소를 선택
#id (#firstname)	id가 firstname인 요소들을 선택
* (*)	모든 요소 선택
element (p)	<p> 요소를 모두 선택
element.class (p.intro)	intro 클래스 내의 <p> 요소를 모두 선택
element,element (div, p)	<div> 요소와 <p> 요소를 모두 선택
element element (div p)	<div> 요소 내의 모든 <p> 요소를 선택
element>element (div > p)	부모가 <div> 요소인 모든 <p> 요소를 선택
element+element (div + p)	<div> 요소 바로 뒤에 배치된 모든 <p> 요소를 선택
element1~element2 (p ~ ul)	<p> 요소가 앞에 오는 모든 <ul> 요소를 선택
[attribute] ([target])	target 속성이 있는 모든 요소를 선택
[attribute=value] ([target=_blank])	target 속성이 _blank인 모든 요소를 선택
[attribute~=value] ([title~=flower])	flower 단어를 포함하는 title 속성인 모든 요소를 선택
[attribute|=value] ([lang|=en])	en으로 시작하는 lang 속성인 모든 요소를 선택
[attribute^=value] (a[href^="https"])	href 속성 값이 https로 시작하는 모든 <a> 요소를 선택
[attribute$=value] (a[href$=".pdf"])	href 속성 값이 .pdf로 끝나는 모든 <a> 요소를 선택
[attribute*=value] (a[href*="w3schools"])	href 속성 값에 하위 문자열 w3schools가 포함된 모든 <a> 요소를 선택
:active (a:active)	active link 선택
::after (p::after)	각 <p> 요소 내용 뒤에 무언가 삽입
::before (p::before)	각 <p> 요소 내용 앞에 무언가 삽입
:checked (input:checked)	체크된 모든 <input> 요소를 선택
:default (input:default)	기본 <input> 요소를 선택
:disabled (input:disabled)	비활성화된 모든 <input> 요소를 선택
:empty (p:empty)	자식이 없는 모든 <p> 요소 선택 (텍스트 노드 포함)
:enabled (input:enabled)	활성화된 모든 <input> 요소를 선택
:first-child (p:first-child)	부모의 첫 번째 자식인 모든 <p> 요소를 선택
::first-letter (p:first-letter)	모든 <p> 요소의 첫 글자 선택
::first-line (p:first-line)	모든 <p> 요소의 첫 번째 줄을 선택
:first-of-type (p:first-of-type)	부모의 첫 번째 <p> 요소인 모든 <p> 요소를 선택
:focus (input:focus)	포커스가 있는 입력 요소를 선택
:hover (a:hover)	마우스 오버 링크 선택
:in-range (input:in-range)	지정된 범위 내의 값을 가진 입력 요소를 선택
:indeterminate (input:indeterminate)	불확실한 상태의 입력 요소를 선택
:invalid (input:invalid)	유효하지 않은 값을 가진 모든 입력 요소를 선택
:lang(language) (p:lang(it))	lang 속성이 이탈리어인 모든 <p> 요소를 선택
:last-child (p:last-child)	부모의 마지막 자식인 모든 <p> 요소를 선택
:last-of-type (p:last-of-type)	부모의 마지막 <p> 요소인 모든 <p> 요소를 선택
:link (a:link) 	방문하지 않은 모든 링크 선택
:not(selector) (:not(p))	<p>요소가 아닌 모든 요소를 선택
:nth-child(n) (p:nth-child(2))	부모의 두 번째 자식인 모든 <p> 요소를 선택
:nth-last-child(n) (p:nth-last-child(2))	부모의 뒤에서 두 번째 자식인 모든 <p> 요소를 선택
:nth-last-of-type(n) (p:nth-last-of-type(2))	부모의 뒤에서 두 번째 <p> 요소인 모든 <p> 요소를 선택
:nth-of-type(n) (p:nth-of-type(2))	부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택
:only-of-type (p:only-of-type)	부모의 유일한 <p> 요소인 모든 <p> 요소를 선택
:only-child (p:only-child)	부모의 유일한 자식인 모든 <p> 요소를 선택
:optional (input:optional)	required 속성이 없는 입력 요소를 선택
:out-of-range (input:out-of-range)	지정된 범위 밖의 값을 가진 입력 요소를 선택
::placeholder (input:placeholder)	placeholder 속성이 지정된 입력 요소를 선택
:read-only (input:read-only)	readonly 속성이 지정된 입력 요소를 선택
:read-write (input:read-write)	readonly 속성이 지정되지 않은 입력 요소를 선택
:required (input:required)	required 속성이 지정된 입력 요소를 선택
:root (:root)	문서의 루트 요소를 선택
::selection (::selection)	사용자가 선택한 요소 부분을 선택
:target (#news:target)	현재 활성된 #news 요소를 선택 (해당 앵커 이름이 포함된 url 클릭)
:valid (input:valid)	유효한 값을 가진 모든 입력 요소를 선택
:visited (a:visited)	방문한 모든 링크 선택

잉 기머링