🔎 사용자 동작에 반응하는 가상 클래스
: link
- 방문하지 않은 링크에 적용
a:link { color:blue; }: visited
- 한 번 이상 방문한 링크에 적용
a:visited { color:blue; }: hover
- 커서를 올려놓을 때 적용
a:hover { color:blue; }: active
- 활성화했을 때 ( 누르고 있을 때 ) 적용
a:active { color:blue; }: focus
- 웹 요소에 초점이 맞추어졌을 때 적용
ex) 아이디 입력을 위해 텍스트 필드 안에 커서를 놓거나 Tab을 눌러 포커스를 이동했을 때
a:focus { color:blue; }선택자 순서에 주의 🖐
link > visited > hover > active
순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않음
.nav a:link, .nav a:visited {...}🔎 UI 요소 상태에 따른 가상 클래스
: enabled
- 요소가 사용 가능한 상태일 때 적용
: disabled
- 요소가 사용 불가능한 상태일 때 적용 (readonly)
: checked
- 라디오 박스 , 체크 박스에서 해당 항목을 선택했을 떄 적용
🔎 구조 가상 클래스
: root
- 문서 전체에 적용
: nth-child(n)
- n번째 자식 요소에 적용
div p:nth-child(3) {}
// div요소 안에서 세 번째 자식 요소인 p 요소에 적용
div p:nth-child(2n+1) {}
// div요소 안에서 짝수 번쨰 자식 요소인 p 요소에 적용: first-child
: last-child
- 첫 번째 , 마지막 자식 요소에 적용
🔎 그 외
: target
- 페이지 이동 시 링크를 이용하고, 같은 문서 안 다른 위치로 이동 시 앵커를 이용
이때 앵커의 목적지가 되는 부분에 적용
: not( )
- 괄호 안에 있는 요소를 제외한 요소에 적용
:: before
:: after
- 특정 요소의 내용 앞이나 뒤에 적용
