실무에서 자주 쓰는 필수 CSS 선택자 정리

 실무에서 자주 쓰는 필수 CSS 선택자

 

아래 리스트는 실무에서 자주 쓰는 CSS 선택자입니다.

 

종류	선택자	예시	설명
클래스선택자	.class	.intro	intro를 클래스로 가진 모든 요소
Both	.class1.class2	.name1.name2	name1과 name2를 둘 다 가진 모든 요소
자손선택자	.class1 .class2	.name1 .name2	name1의 자식 중 name2를 클래스로 가진 모든 요소
아이디선택자	#id	#firstname	firstname을 아이디로 가진 모든 요소
전체선택자	*	*	모든 요소를 선택, 렌더링 성능 저하 가능
요소선택자	element	p	모든 p 요소
And	element,element	div, p	모든 div 요소와 모든 p 요소
자손선택자	element>element	div > p	부모가 div 요소인 모든 p 요소
인접 형제 선택자	element+element	div + p	div 요소 바로 뒤에 배치되는 첫 번째 p 요소
일반 형제 선택자	element1~element2	p ~ ul	p 요소가 앞에 오는 모든 ul 요소
속성선택자	[attribute]	[target]	대상 속성이 있는 모든 요소
	[attribute=value]	[target=_blank]	target="_blank"가 있는 모든 요소
	[attribute~=value]	[title~=flower]	"꽃"이라는 단어가 포함된 제목 속성을 가진 모든 요소
	[attribute|=value]	[lang|=en]	"en"으로 시작하는 lang 속성 값을 가진 모든 요소
	[attribute^=value]	a[href^="https"]	href 속성 값이 "https"로 시작하는 모든 a 요소
	[attribute$=value]	a[href$=".pdf"]	href 속성 값이 ".pdf"로 끝나는 모든 a 요소
	[attribute*=value]	a[href*="w3schools"]	href 속성 값에 하위 문자열 "w3schools"가 포함 된 모든 a 요소
구조선택자	:first-child	p:first-child	부모의 첫 번째 자식인 모든 p 요소
	:last-child	p:last-child	부모의 마지막 자식인 모든 p 요소
	:nth-child(n)	p:nth-child(2)	부모의 두 번째 자식인 모든 p 요소
	:nth-last-child(n)	p:nth-last-child(2)	마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 p 요소
	:first-of-type	p:first-of-type	부모의 첫 번째 p 요소인 모든 p 요소
	:last-of-type	p:last-of-type	부모의 마지막 p 요소인 모든 p 요소
	:nth-of-type(n)	p:nth-of-type(2)	부모의 두 번째 p 요소인 모든 p 요소
	:nth-last-of-type(n)	:nth-last-of-type(2)	마지막 자식부터 계산하여 부모의 두 번째 p 요소인 모든 p 요소
	:only-of-type	p:only-of-type	부모의 유일한 p 요소인 모든 p 요소
반응선택자	:active	a:active	a 요소가 활성화된 상태(클릭, 키보드 이벤트 등)
	:hover	a:hover	a 요소 위에 마우스 포인터가 올라가 있는 상태
문자선택자	::after	p::after	각 p 요소의 내용 뒤에 {무언가}를 삽입하라
	::before	p::before	각 p 요소의 내용 앞에 {무언가}를 삽입하라
	::first-letter	p::first-letter	모든 p 요소의 첫 글자를 선택
	::first-line	p::first-line	모든 p 요소의 첫 번째 줄을 선택
	::selection	::selection	사용자가 선택한 요소 부분을 선택
상태선택자	:focus	input:focus	포커스가 있는 입력 요소를 선택
	:enabled	input:enabled	활성화된 모든 input 요소
	:disabled	input:disabled	비활성화 된 모든 input 요소
	:checked	input:checked	선택된 모든 input 요소.
링크선택자	:link	a:link	방문하지 않은 모든 링크
	:visited	a:visited	방문한 적 있는 모든 링크

 

 

 

 

 선택자를 시각적으로 표현해주는 사이트

 

설명만 봐서는 이해가 잘 안되는 분들은 이 사이트를 참고해주세요. 시각적으로 선택자를 확인할 수 있습니다.

 

 

 

 

 자료 출처

 

[w3schools] -  www.w3schools.com/cssref/css_selectors.asp