CSS 다중 선택자 참조

CSS 선택자

CSS에서 선택자는 스타일을 설정할 요소를 선택하는 데 사용되는 패턴이다. 대부분의 선택자 요소에 대한 사용법과 설명을 번역 및 이해하기 쉽도록 구분해놓았으므로, 이를 통해 선택자 활용 능력을 발전시킬 수 있을 것이다.

선택자	예시	예제 설명
.class	.intro	class="intro"의 모든 요소를 선택합니다.
.class1.class2	.name1.name2	name1과 name2가 모두 설정된 모든 요소를 선택합니다.
.class1 .class2	.name1 .name2	name1 요소와 함께 name2의 하위 항목인 모든 요소를 선택합니다.
#id	#firstname	ID="#firstname"인 요소를 선택합니다.
*	*	모든 요소를 선택합니다.
element	p	모든 p 요소를 선택합니다.
element.class	p.intro	class="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 요소 앞에 오는 모든 > 요소를 선택합니다.
[attribute]	[target]	대상 특성이 있는 모든 요소를 선택합니다.
[attribute=value]	[target=_blank]	target="_blank"인 모든 요소를 선택합니다.
[attribute~=value]	[title~=flower]	"flower"이라는 단어가 포함된 제목 특성을 가진 모든 요소를 선택합니다.
[attribute|=value]	[lang|=en]	en으로 시작하는 언어 속성 값을 가진 모든 요소를 선택합니다.
[attribute^=value]	a[href^="https"]	https로 시작하는 href 속성 값을 가진 모든 a 요소를 선택합니다.
[attribute$=value]	a[href$=".pdf"]	href 속성 값이 ".pdf"로 끝나는 모든 a 요소를 선택합니다.
[attribute*=value]	a[href*="w3schools"]	href 속성 값이 "w3schools" 하위 문자열을 포함하는 모든 a 요소를 선택합니다.
:active	a:active	활성 링크를 선택합니다.
::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 요소를 선택합니다.
:focus	input:focus	포커스가 있는 입력 요소를 선택합니다.
:fullscreen	:fullscreen	전체 화면 모드에 있는 요소를 선택합니다.
:hover	a:hover	마우스 위에 있는 링크를 선택합니다.
:in-range	input:in-range	지정된 범위 내의 값을 가진 입력 요소를 선택합니다.
:indeterminate	input:indeterminate	중간 상태에 있는 입력 요소를 선택합니다.
:invalid	input:invalid	잘못된 값을 가진 모든 입력 요소를 선택합니다.
:lang(language)	p:lang(it)	"it"(이탈리아어)와 동일한 언어 특성을 가진 모든 with 요소를 선택합니다.
:last-child	p:last-child	상위 항목의 마지막 하위 항목인 모든 p 요소를 선택합니다.
:last-of-type	p:last-of-type	상위의 마지막 < 요소인 모든 p 요소를 선택합니다.
:link	a:link	방문하지 않은 모든 링크를 선택합니다.
::marker	::marker	목록 항목의 마커를 선택합니다.
: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 요소를 선택합니다.
:only-child	p:only-child	상위 항목의 유일한 하위 항목인 모든 p 요소를 선택합니다.
:optional	input:optional	필수 속성이 없는 입력 요소를 선택합니다.
:out-of-range	input:out-of-range	지정된 범위를 벗어나는 값을 가진 입력 요소를 선택합니다.
::placeholder	input::placeholder	자리 표시자 속성이 지정된 입력 요소를 선택합니다.
:read-only	input:read-only	지정된 "읽기 전용" 특성을 가진 입력 요소를 선택합니다.
:read-write	input:read-write	"읽기 전용" 특성이 지정되지 않은 입력 요소를 선택합니다.
:required	input:required	필수 속성이 지정된 입력 요소를 선택합니다.
:root	:root	문서의 루트 요소를 선택합니다.
::selection	::selection	사용자가 선택한 요소의 부분을 선택합니다.
:target	#news:target	현재 활성 #뉴스 요소를 선택합니다(해당 앵커 이름이 포함된 URL 클릭).
:valid	input:valid	유효한 값을 가진 모든 입력 요소를 선택합니다.
:visited	a:visited	방문한 모든 링크를 선택합니다.