선택자 종류 선택자 형태 선택자 예시 
전체 선택자 * *
태그 선택자 태그 h1
아이디 선택자 #아이디 #header
클래스 선택자 .클래스 .item
후손 선택자 선택자 선택자 header h1
자손 선택자 선택자 > 선택자 header > h1
속성 선택자 선택자[속성=값] input[type=text]
선택자[속성~=값] div[data-role~=row]
선택자[속성|=값] div[data-role|=row]
선택자[속성^=값] div[data-role^=row]
선택자[속성$=값] div[data-role$=9]
선택자[속성*=값] div[data-role*=row]
동위 선택자 선택자+ 선택자  h1 + div
선택자 ~ 선택자 h1 ~ div
구조 선택자
( 수열이란 자연수를 정의역으로 갖는 함수나 그 함수의 결과로 얻어지는 원소들을 나열한 것을 의미)
선택자:first-child li:first-child
선택자:last-child li:last-child
선택자:nth-child(수열) li:nth-child(2n+1)
선택자:nth-last-child(수열) li:nth-last-child(2n+1)
선택자:first-of-type h1:first-of-type
선택자:last-of-type h1:last-of-type
선택자:nth-of-type(수열) h1:nth-of-type(2n+1)
선택자:nth-last-of-type(수열) h1:nth-alst-of-type(2n+1)
반응 선택자 선택자:active div:active
선택자:hover div:hover
상태 선택자 :checked input:checked
:focus :input:focus
:enabled input:enabled
:disabled input:disabled
링크 선택자 :link a:link
:visited a:visited
문자 선택자 ::fitst-letter p::first-letter
::fitst-line p::first-line
::after p::after
::before p::before
::selection p::selection
부정 선택자 선택자:not(선택자) li:not(.item)

https://www.w3.org/TR/css/ 참조

+ Recent posts