CSS 선택자 정리

Selector	Example	Example description
.class	.intro	class가 "intro"인 모든 HTML 요소에 대해 선택
.class1.class2	.name1.name2	class가 name1이면서 name2인 모든 HTML 요소에 대해 선택
.class1 .class2	.name1 .name2	class가 name1이거나 name2인 모든 HTML 요소에 대해 선택
#id	#firstname	id가 "firstname"인 HTML 요소에 대해 선택
*	*	모든 HTML 요소에 대해 선택
element	p	<p>인 모든 HTML 요소에 대해 선택
element.class	p.intro	<p>이면서 class가 "intro"인 모든 HTML 요소에 대해 선택
element,element	div, p	<p>인 모든 HTML 요소에 대해 선택 Selects all <div> elements and all <p> elements
element element	div p	<div>안에 들어있는 <p>인 모든 HTML 요소에 대해 선택
element>element	div > p	부모가 <div>이고 자식이<p>인 모든 HTML 요소에 대해 선택
element+element	div + p	<div>요소 뒤에 <p>가 오는 모든 HTML 요소에 대해 선택
element1~element2	p ~ ul	<p>요소 이후 <ul>인 모든 HTML 요소에 대해 선택
[attribute]	[target]	target속성을 지닌 모든 HTML 요소에 대해 선택
[attribute=value]	[target=_blank]	target속성의 값이 "_blank"인 모든 HTML 요소에 대해 선택
[attribute~=value]	[title~=flower]	title속성에서 "flower" 단어를 포함한 모든 HTML 요소에 대해 선택
[attribute|=value]	[lang|=en]	lang 속성값이 "en"으로 시작하는 모든 HTML 요소에 대해 선택
[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	링크가 활성화 된 모든 <a> 요소에 대해 선택
::after	p::after	<p> 요소의 뒤에 content를 추가
::before	p::before	<p> 요소의 앞에 content를 추가
:checked	input:checked	체크된 모든 <input> 요소에 대해 모두 선택
:default	input:default	기본값으로 지정된 모든 <input> 요소에 대해 선택
:disabled	input:disabled	비활성화된 모든 <input> 요소에 대해 선택
:empty	p:empty	자식이 없는 모든 <p> 요소에 대해 선택 (text nodes 포함)
: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> 요소에 대해 선택
:focus	input:focus	집중(focus)된 input 요소에 대해 선택
:hover	a:hover	links위에 마우스가 올라가 있을 때(hover)에 대해 선택
:in-range	input:in-range	input 요소의 값이 지정한 범위 내에 있을 때에 대해 선택
:indeterminate	input:indeterminate	input 요소가 미결정 상태(indeterminate state) 있을 때에 대해 선택
:invalid	input:invalid	모든 유효하지 않은 값을 가지고 있는 input 요소에 대해 선택
:lang(language)	p:lang(it)	모든 lang 속성의 값이 "it" (Italian) 인 <p> 요소에 대해 선택
:last-child	p:last-child	모든 부모의 마지막 자식이 <p> 요소인 경우에 대해 선택
:last-of-type	p:last-of-type	모든 마지막으로 부모가 되는 <p> 요소에 대해 선택
:link	a:link	아직 방문하지 않은 <a> 요소에 대해 선택
:not(selector)	:not(p)	<p> 요소가 아닌 모든 HTML 요소에 대해 선택
: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> 요소 타입이 하나인 경우에 대해 선택
:only-child	p:only-child	부모의 자식이 유일하게 <p> 요소 하나인 경우에 대해 선택
:optional	input:optional	"required" 속성이 없는 input 요소에 대해 선택
:out-of-range	input:out-of-range	지정된 범위 밖의 값을 가진 input요소에 대해 선택
::placeholder	input::placeholder	"placeholder" 속성의 값이 정의 된 input 요소에 대해 선택
:read-only	input:read-only	"readonly" 속성이 정의 되어 있는 input 요소에 대해 선택
:read-write	input:read-write	"readonly" 속성이 정의 되지 않은 input 요소에 대해 선택
:required	input:required	"required" 속성이 정의된 input 요소에 대해 선택
:root	:root	HTML 문서의 최상위(root) 요소에 대해 선택
::selection	::selection	유저가 선택한 요소에 대해 선택
:target	#news:target	현재 활성화된 #news 요소에 대해 선택 (해당 Anchor의 이름이 포함 된 URL을 클릭)
:valid	input:valid	유효한 입력값을 가진 input 요소에 대해 선택
:visited	a:visited	모든 방문한 <a> 요소에 대해 선택