CSS 선택자 종류(+자주 쓰는 선택자 실습)

자주 쓰는 선택자 실습

1) 태그 선택자(선택자)

2) 아이디 선택자(#아이디)

3) 클래스 선택자(.태그)

1-3)태그, 아이디, 클래스 선택자

 

4) 후손 선택자(선택자 A 선택자 B)

선택자 A의 후손인  선택자 B 선택

 

5) 자손 선택자(선택자 A > 선택자 B)

선택자 A의 (직계)자손 선택자 B 선택

 

6) 구조 선택자

1. 선택자:first/last child

 

2. 선택자:nth-child(수열)

 

7) 동위 선택자(A+B, A~B)

A+B는 바로 뒤 요소만, A~B는 뒤에 있는 요소 전부

 

8) 부정 선택자(선택자:not(선택자))

 

9)링크 선택자(선택자:link, 선택자:visited)

:link 클릭하기 전 앵커태그 :visitied 방문한 앵커태그

 

10)반응 선택자(선택자:hover)

커서를 갖다댈 경우 폰트가 커짐

 

나머지 선택자 종류

https://www.w3schools.com/cssref/css_selectors.asp