CSS 선택자란?
- 특정한 HTML 태그를 선택할 때 사용하는 기능
-> 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있음
CSS 블록
- 선택자 + 스타일 속성 + 스타일 값
CSS 선택자 종류
전체 선택자: * -> 모든 태그 선택 (html, head, title, style 태그까지 선택)
태그 선택자: 태그명 -> 특정 종류 태그 모두 선택
아이디 선택자: #아이디명 -> 중복 불가능
클래스 선택자: .클래스명 -> 중복 가능
후손 선택자: 선택자 선택자 -> 하위 전체
자손 선택자: 선택자 > 선택자 -> 바로 하위
속성 선택자 -> 특정 속성을 가진 태그 선택, 잘 사용X
- 선택자[속성=값] -> 특정 값 포함
- 선택자[속성 ~=값] -> 특정 값 포함
- 선택자[속성^=값] -> 특정 값으로 시작
- 선택자[속성$=값] -> 특정 값으로 끝
- 선택자[속성*=값] -> 특정 값 포함
동위 선택자 -> 같은 계층에 있는 태그 선택
- 선택자 + 선택자 -> 바로 뒤 하나의 태그
- 선택자 ~ 선택자 -> 바로 뒤 모든 태그
구조 선택자 -> 특정 위치에 있는 태그 선택
- 선택자:first-child
- 선택자:last-child
- 선택자:nth-child(수열)
- 선택자:nth-last-child(수열)
- 선택자:first-of-type -> 태그 형태 구분, 특정 태그의 첫 번째 태그 선택
- 선택자:last-of-type
- 선택자:nth-of-type(수열)
- 선택자:nth-last-of-type(수열)
반응 선택자
- 선택자:active -> 마우스 클릭
- 선택자:hover -> 마우스 올렸을 때
상태 선택자 -> input 태그에 사용
- :checked
- :focused
- :enabled
- :disabled
링크 선택자 -> a 태그에 적용되는 선택자
- :link
- :visited
문자 선택자 -> 태그 내부 특정 조건의 문자 선택
- ::first-letter
- ::first-line
- ::after
- ::before
- ::selection -> 사용자가 드래그한 글자 선택
부정 선택자 -> 모두 반대로 적용
- 선택자:not(선택자)
-> 너무 많다... 외울 필요 없이 익숙해지기
