[Frontend/CSS] HTML에 스타일을 적용하기 위한 선택자의 종류

전체 선택자

 

선택자	의미
*	HTML 페이지 내부의 모든 태그를 선택합니다.

 

---

태그 선택자

 

선택자	의미
T	태그명이 T인 특정 태그를 선택합니다.

 

---

클래스 선택자

 

선택자	의미
.myClass	클래스 속성값이 myClass으로 지정된 요소를 선택합니다.

 

---

아이디 선택자

 

선택자	의미
#myId	id 속성값이 myId로 지정된 요소를 선택합니다.

 

---

복합 선택자

 

선택자	의미
E F	E 요소 안에있는 모든 F 요소를 선택합니다.
E>F	E 요소의 한단계 아래에 있는 모든 F 요소를 선택합니다.

 

---

인접/일반 형제 선택자

 

선택자	의미
E+F	E 요소를 뒤따르는 인접한 F 요소 하나를 선택합니다. (E의 뎁스 = F의 뎁스)
E~F	E 요소를 뒤따르는 모든 F 요소를 선택합니다. (E의 뎁스 = F의 뎁스)

 

---

속성 선택자

 

선택자	의미
E[attr]	'attr' 속성을 가지고 있는 요소 E를 선택합니다.
E[attr="val"]	'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 E를 선택합니다.
E[attr~="val"]	'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다.(공백으로 나누었을때 동일한 값이 있는지를 판단)
E[attr^="val"]	'attr' 속성의 값이 'val'으로 시작하는 요소를 선택합니다.
E[attr$="val"]	'attr' 속성의 값이 'val'으로 끝나는 요소를 선택합니다.
E[attr*="val"]	'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다.
E[attr|="val"]	'attr' 속성의 값이 정확하게 'val' 이거나 'val' 로 시작되는 요소 E를 선택합니다.

 

---

링크 가상 클래스 선택자

 

선택자	의미
a:link	방문하지 않은 링크를 선택합니다.
a:visited	방문한 링크를 선택합니다.

 

---

동적 가상 클래스 선택자

 

선택자	의미
E:active	E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택합니다.
E:hover	E 요소에 마우스가 올라가 있는 동안 E를 선택합니다.
E:focus	E 요소에 포커스가 머물러 있는 동안 E를 선택합니다.

 

---

구조적 가상 클래스 선택자

 

선택자	의미
E:root	문서의 최상위 요소(html 태그)를 선택합니다.
E:nth-child(n)	E 선택자의 부모요소의 자식요소들 중에서, 앞에서 n번째 요소를 선택합니다.
E:nth-last-child(n)	E 선택자의 부모요소의 자식요소들 중에서, 뒤에서 n번째 요소를 선택합니다.
E:first-child	E 선택자의 부모요소의 자식요소들 중에서, 첫번째 요소를 선택합니다.
E:last-child	E 선택자의 부모요소의 자식요소들 중에서, 마지막 요소를 선택합니다.
E:nth-of-type(n)	E 선택자에 해당되는 요소들 중에서, 앞에서 n번째 요소를 선택합니다.
E:nth-last-of-type(n)	E 선택자에 해당되는 요소들 중에서, 뒤에서 n번째 요소를 선택합니다.
E:first-of-type	E 선택자에 해당되는 요소들 중에서, 첫번째 요소를 선택합니다.
E:last-of-type	E 선택자에 해당되는 요소들 중에서, 마지막 요소를 선택합니다.
E:only-child	E 선택자의 부모요소의 자식요소가 유일하다면 선택합니다.
E:only-of-type	E 선택자에 해당되는 요소가 유일하다면 선택합니다.
E:empty	텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택합니다.

 

---

언어 선택자

 

선택자	의미
E:lang(ko)	HTML lang 속성의 값이 'ko'으로 지정된 요소를 선택합니다.

 

---

부정 선택자

 

선택자	의미
E:not(S)	S가 아닌 E 요소를 선택합니다.

 

---

목적 선택자

 

선택자	의미
E:target	E의 URI가 요청되면 선택합니다. (E는 ID가 지정되어 있어야 합니다.)

 

---

UI요소 상태 선택자

 

선택자	의미
E:enabled	사용 가능한 태그(input, textarea, select, button) E를 선택합니다.
E:disabled	사용 불가능한 태그(input, textarea, select, button) E를 선택합니다.
E:checked	선택된 태그(input[type="checkbox or radio"]) E를 선택합니다.

 

---

가상요소 선택자

 

선택자	의미
E::first-line	E 요소의 첫 번째 라인을 선택합니다.
E::first-letter	E 요소의 첫 번째 문자를 선택합니다.
E::before	E 요소의 시작 지점에 생성된 요소를 선택합니다.
E::after	E 요소의 끝 지점에 생성된 요소를 선택합니다.