CSS 1,2 셀렉터

CSS 1,2 셀렉터

Selector	Example	Example description	CSS
.class	.intro	class="intro" 속성을 가진 모든 엘리먼트 선택	1
#id	#firstname	id="firstname" 속성을 가진 엘리먼트 선택	1
*	*	모든 엘리먼트 선택	2
element	p	모든 <p> 엘리먼트 선택	1
element,element	div,p	모든 <div> 엘리먼트와 모든 <p> 엘리먼트 선택	1
element element	div p	<div> 내의 모든 <p> 엘리먼트 선택	1
element>element	div>p	<div> 바로 하위에 있는 모든 <p> 엘리먼트 선택	2
element+element	div+p	<div> 바로 다음에 있는 모든 <p> 엘리먼트 선택	2
[attribute]	[target]	target 속성을 갖고 있는 모든 엘리먼트 선택	2
[attribute=value]	[target=_blank]	target="_blank" 속성을 갖고 있는 모든 엘리먼트 선택	2
[attribute~=value]	[title~=flower]	"flower" 단어를 포함한 title 속성을 갖고 있는 모든 엘리먼트 선택	2
[attribute|=value]	[lang|=en]	lang 속성값이 "en"으로 시작하는 모든 엘리먼트 선택	2
:link	a:link	모든 방문하지 않은 링크 선택	1
:visited	a:visited	모든 방문했던 링크 선택	1
:active	a:active	활성화된 모든 링크 선택	1
:hover	a:hover	마우스 오버된 링크 선택	1
:focus	input:focus	포커스가 있는 <input> 엘리먼트 선택	2
:first-letter	p:first-letter	모든 <p> 엘리먼트의 첫 번째 문자 선택	1
:first-line	p:first-line	모든 <p> 엘리먼트의 첫 번째 줄 선택	1
:first-child	p:first-child	부모가 있는 모든 <p> 엘리먼트의 첫 번째 선택	2
:before	p:before	모든 <p> 엘리먼트 콘텐트의 앞에 선택	2
:after	p:after	모든 <p> 엘리먼트 콘텐트의 뒤 선택	2
:lang(language)	p:lang(it)	lang 속성값이 "it"로 시작하는 모든 <p> 엘리먼트 선택	2
element1~element2	p~ul	<p> 엘리먼트 앞에 있는 모든 <ul> 엘리먼트 선택	3
[attribute^=value]	a[src^="https"]	src 속성값이 "https"로 시작하는 모든 <a> 엘리먼트 선택	3
[attribute$=value]	a[src$=".pdf"]	src 속성값이 ".pdf"로 끝나는 모든 <a> 엘리먼트 선택	3
[attribute*=value]	a[src*="w3schools"]	src 속성값이 "w3schools" 문자열을 포함하는 모든 <a> 엘리먼트 선택	3
:first-of-type	p:first-of-type	부모가 있는 첫번째 <p> 엘리먼트인 모든 <p>엘리먼트 선택	3
:last-of-type	p:last-of-type	부모가 있는 마지막 <p> 엘리먼트인 모든 <p>엘리먼트 선택	3
:only-of-type	p:only-of-type	부모가 있는 유일한 <p> 엘리먼트인 모든 <p>엘리먼트 선택	3
:only-child	p:only-child	부모에게 유일한 자식인 모든 <p>엘리먼트 선택	3
:nth-child(n)	p:nth-child(2)	부모에게 두 번째 자식인 모든 <p>엘리먼트 선택	3
:nth-last-child(n)	p:nth-last-child(2)	부모에게 마지막에서 두 번째 자식인 모든 <p>엘리먼트 선택	3
:nth-of-type(n)	p:nth-of-type(2)	부모에게 두 번째 <p> 엘리먼트인 모든 <p>엘리먼트 선택	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	부모에게 마지막에서 두 번째 <p> 엘리먼트인 모든 <p>엘리먼트 선택	3
:last-child	p:last-child	부모 안에서 마지막 자식인 모든 <p> 엘리먼트 선택	3
:root	:root	문서 루트 엘리먼트 선택	3
:empty	p:empty	하위에 아무것도 없는(텍스트마저도 없는) 모든 <p> 선택	3
:target	#news:target	현재 활성화된 #news 엘리먼트 선택(앵커 이름을 포함한 URL이 클릭된)	3
:enabled	input:enabled	모든 활성화된 <input> 엘리먼트 선택	3
:disabled	input:disabled	모든 비활성화된 <input> 엘리먼트 선택	3
:checked	input:checked	모든 체크된 <input> 엘리먼트 선택	3
:not(selector)	:not(p)	<p> 엘리먼트가 아닌 모든 요소 선택	3
::selection	::selection	사용자가 선택한 부분 선택	3

원문: http://www.w3schools.com/cssref/css_selectors.asp

출처 : http://okjsp.pe.kr/seq/197120