CSS Selector Reference

css를 처음 아는 마음으로 하나하나 차근차근 배워보자

<https://www.w3schools.com/ 참고 해석은 내맘대로;;>

Selector	Example	Example description
.class	.intro	class="intro"가 있는 모든 요소를 선택합니다.
#id	#firstname	id="firstname"를 사용하여 요소를 선택합니다.
*	*	모든 요소를 선택합니다.
element	p	모두 <p> 요소를 선택합니다.
element,element	div, p	모두 <div> 요소와 <p> 요소를 선택합니다.
element element	div p	<p>요소 내에서 <div> 요소를 모두 선택합니다.
element>element	div > p	상위 항목인 <p>요소가 있는 모든 <div>요소를 선택합니다
element+element	div + p	<div>요소 바로 뒤에 배치된 모든 <p> 요소를 선택합니다.
element1~element2	p ~ ul	<p> 요소가 선행되는 모든 <ul> 요소를 선택합니다.
[attribute]	[target]	대상 특성이 있는 모든 요소 선택
[attribute=value]	[target=_blank]	target="_blank"가 있는 모든 요소를 선택합니다.
[attribute~=value]	[title~=flower]	"flower" 이라는 단어가 포함된 제목 속성을 가진 모든 원소를 선택합니다.
[attribute|=value]	[lang|=en]	"en" 으로 시작하는 언어 특성 값을 가진 모든 원소를 선택합니다.
[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	활성 링크를 선택합니다.
::after	p::after	각각의<p>요소의 컨텐츠 뒤에 무언가를 삽입합니다.
::before	p::before	각<p>요소의 컨텐츠 앞에 무언가를 삽입합니다.
:checked	input:checked	확인된 모든<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	focus가 있는 input요소를 선택합니다.
:hover	a:hover	마우스에 대한 링크를 선택합니다.
:in-range	input:in-range	지정된 범위(range) 내에 값이 있는 입력 요소를 선택합니다.
:invalid	input:invalid	잘못된 값으로 모든 입력 요소를 선택합니다.
:lang(language)	p:lang(it)	"it" (Italian)와 동일한 속성을 가진 모든 <p> 요소를 선택합니다.
:last-child	p:last-child	상위 항목의 마지막 하위 항목인 모든 <p>요소를 선택합니다.
:last-of-type	p:last-of-type	상위<p>요소의 마지막<p>요소를 선택합니다.
:link	a:link	방문하지 않는 모든 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	지정된 범위 외부 값을 사용하여 입력 요소를 선택합니다.
:read-only	input:read-only	지정된 "readonly"(읽기 전용)특성이 있는 입력 요소를 선택합니다.
:read-write	input:read-write	필요한 "required"(필수) 속성을 지정하여 입력 요소를 선택합니다.
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	문서의 루트 요소를 선택합니다.
::selection	::selection	사용자가 선택한 요소의 부분을 선택합니다.
:target	#news:target	현재 활성#news 요소를 선택합니다(해당 URL이름이 포함된 URL을 클릭합니다.)
:valid	input:valid	valid값을 가진 모든 input요소를 선택합니다.
:visited	a:visited	모든 visited링크를 선택합니다.