동적 가상 클래스 선택자란?
- 요소는 하나인데, 사용자의 동작에 따라 스타일링을 바꿔줄 수 있는 선택자
link와 visited
- 하이퍼링크에 적용할 수 있는 선택자
- 하이퍼링크 태그의 경우 한번도 클릭하지 않은 상태, 방문한 적이 있는 상태로 나뉩니다.
- selector:link
- 한번도 클릭한 적 없는, 즉 방문한 적 없는 상태의 하이퍼링크에 스타일을 적용하는 선택자 입니다.
- selector:visited
- 방문처리 된 하이퍼링크에 스타일을 적용하는 선택자 입니다.
hover와 active, focus
- 마우스와 상호작용을 하는 선택자들입니다.
- selector:hover
- 선택된 태그에 마우스를 올리면 스타일을 적용합니다.
- selector:active
- 선택된 태그를 누르는 동안 스타일을 적용합니다.
- mouse down 비슷한 효과를 보여줍니다.
- link 나 hover, visited 가 적용되어있다면 active 보다 먼저 적용됩니다.
- selector:focus
- 해당 태그에서 인터랙션을 수행하고 있을때 스타일을 적용합니다.
- selector등의 form태그와 상호작용을 할때 적용됩니다.
enabled, disabled, checked
- selector:enabled
- 해당 태그가 활성화 된 상태 ( disabled속성이 없을 때 )일때 스타일을 적용합니다.
- selector:disabled
- 해당 태그가 비활성화 된 상태 ( disabled 속성이 있을 때 )일때 스타일을 적용합니다.
- selector:checked
- 해당 태그가 checked 된 상태일때 스타일을 적용합니다.
- 주로 checkbox 나 radio 폼에 적용합니다.
'웹 프론트 엔드' 카테고리의 다른 글
CSS 선택자 - 선택자 결합 (0) | 2024.03.12 |
---|---|
CSS 선택자 - 가상 요소 선택자 (0) | 2024.03.12 |
CSS 선택자 - 가상클래스 선택자 : not (0) | 2024.03.12 |
CSS 선택자 - 가상 클래스 선택자 : child & of-type (0) | 2024.03.11 |
CSS 선택자 - 속성 선택자 (0) | 2024.03.11 |