선택자, 우선순위

🔖 자식, 후손 선택자

선택자	설명
>	상위 요소의 자식 요소 선택
공백	상위 요소의 모든 하위 요소 선택

---

🔖 반응 선택자

사용자의 움직임에 따라 스타일이 적용되는 선택자

선택자	설명
:active	사용자가 해당 요소를 클릭하고 있을 때
:hover	커서가 해당 요소 위에 있을 때

---

🔖 상태 선택자

입력 양식의 상태에 따라 스타일이 적용되는 선택자
:focus, :checked, :enabled, :disabled

---

🔖 동위 선택자

동일한 위치에 있는 요소 중에서 뒤에 있는 요소를 선택하는 선택자

선택자	설명
A + B	A 요소 바로 뒤에 위치하는 B 요소 선택
A ~ B	A 요소 뒤에 위치하는 모든 B 요소 선택

---

🔖 문자열 속성 선택자

속성 값의 문자열을 확인하여 스타일을 적용하는 선택자

선택자	설명
^=	속성 값이 특정 값으로 시작하는 태그 선택
$=	속성 값이 특정 값으로 끝나는 태그 선택
*=	속성 값이 특정 값을 포함하는 태그 선택
~=	여러 속성 값이 작성된 속성 중 하나의 속성 값이 특정 값과 일치하는 태그 선택
l=	"-" 기호 앞쪽의 속성 값이 특정 값과 일치하는 태그 선택

---

🔖 일반 구조 선택자

형제 관계 태그 중에서 위치를 기준으로 특정 태그를 선택하는 선택자

선택자	설명
:first-child	첫 번째 형제 태그 선택
:last-child	마지막 형제 태그 선택
:nth-child(n)	n번째 형제 태그 선택
:nth-last-child(n)	끝에서부터 n번째 형제 태그 선택

---

🔖 형태 구조 선택자

형제 관계 태그 중에서 태그를 기준으로 특정 태그를 선택하는 선택자

선택자	설명
:first-of-type	동일한 태그 중 첫 번째 형제 태그 선택
:last-of-type	동일한 태그 중 마지막 형제 태그 선택
:nth-of-type(n)	동일한 태그 중 n번째 형제 태그 선택
:nth-last-of-type(n)	동일한 태그 중 끝에서부터 n번째 형제 태그 선택

---

🔖 기타 선택자

선택자	설명
:not( )	괄호 안의 선택자와 반대되는 요소 선택
:empty	자식 태그 또는 내용(문자, 띄어쓰기)이 없는 태그 선택

---

🔖 선택자 우선순위

  1순위 👉 !important
  2순위 👉 인라인 style 속성
  3순위 👉 아이디 선택자
  4순위 👉 클래스 선택자
  5순위 👉 태그 선택자