CSS 선택자 전체 가이드서

CSS 선택자는 원하는 요소의 스타일을 선택하는 패턴입니다.

"CSS" 열은 CSS 버전의 속성 정의를 나타냅니다 (CSS1또는 CSS2또는 CSS에 대해3)

선택자	예제	설명	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]	title 속성이 "flower" 단어를 포함하는 모든 요소를 선택합니다	2
[attribute\|=language]	[lang\|=en]	lang 속성이 "en"으로 시작하는 모든 요소를 선택합니다	2
[attribute^=value]	a[src^="https"]	각각의 src 속성 값이 "https"로 시작하는 요소를 선택합니다	3
[attribute$=value]	a[src$=".pdf"]	각각의 src 속성 값이 ".pdf"로 끝나는 요소를 선택합니다	3
[attribute=value*]	a[src*="w3codebox"]	각각의 src 속성 값이 "w" 문자열을 포함하는 것을 선택합니다3"codebox" 요소	3
:link	a:link	모든 방문하지 않은 링크를 선택합니다	1
:visited	a:visited	모든 방문한 링크를 선택합니다	1
:active	a:active	활성 링크를 선택합니다	1
:hover	a:hover	마우스가 링크 위에 있을 때 선택합니다	1
:focus	input:focus	포커스를 가진 입력 요소를 선택합니다	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
:first-of-type	p:first-of-type	부모의 마지막 자식에서 첫 번째 p 요소를 선택합니다	3
:last-of-type	p:last-of-type	부모의 마지막 자식에서 마지막 p 요소를 선택합니다	3
:only-of-type	p:only-of-type	부모의 마지막 자식에서 유일한 p 요소를 선택합니다	3
:only-child	p:only-child	부모의 마지막 자식에서 유일한 자식을 선택합니다	3
:nth-부모의 마지막 자식에서 두 번째 자식을 선택합니다n)	p:nth-부모의 마지막 자식에서 두 번째 자식을 선택합니다2)	부모의 마지막 자식에서 두 번째 자식을 선택합니다	3
:nth-last-부모의 마지막 자식에서 두 번째 자식을 선택합니다n)	p:nth-last-부모의 마지막 자식에서 두 번째 자식을 선택합니다2)	child(	3
:nth-of-type(n)	p:nth-of-type(2)	부모의 마지막 자식에서 두 번째 p 요소를 선택합니다	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	부모의 마지막 자식에서 세 번째 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	사용할 수 있는 각 입력 요소를 선택합니다	3
:disabled	input:disabled	사용할 수 없는 각 입력 요소를 선택합니다	3
:checked	input:checked	선택된 입력 요소를 선택합니다	3
:not(선택자)	:not(p)	p 요소가 아닌 각 요소를 선택합니다	3
::selection	::selection	사용자가 선택하거나 강조된 상태의 요소를 일치시키기 위해 사용됨	3
:out-of-range	:out-of-range	지정된 범위 외의 값이 있는 input 요소를 일치시키기 위해 사용됨	3
:in-range	:in-range	지정된 범위 내의 값이 있는 input 요소를 일치시키기 위해 사용됨	3
:read-write	:read-write	읽기 및 쓰기 가능한 요소를 일치시키기 위해 사용됨	3
:read-only	:read-only	"readonly" (읽기 전용) 속성을 설정한 요소를 일치시키기 위해 사용됨	3
:optional	:optional	선택할 수 있는 입력 요소를 일치시키기 위해 사용됨	3
:required	:required	"required" 속성을 설정한 요소를 일치시키기 위해 사용됨	3
:valid	:valid	법적 입력 값을 일치시키기 위해 사용됨	3
:invalid	:invalid	비법적 입력 값을 일치시키기 위해 사용됨	3

CSS 함수 (Functions)CSS 16진수 값 색상

CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS 선택자 전체 가이드서