CSS_Selector(3)

CSS고급 선택자
: 가상 클래스와 가상요

 

특정 상태의 HTML요소에 스타일을 적용하기 위해 사용

>> 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분

 

1. 사용자의 동작에 반응하는 가상 클래스 선택자

:link
- 방문하지 않은 링크에 스타일 적용

:visited
- 방문한 링크에 스타일 적용

:active
- 웹 요소를 활성화했을 때의 스타일 적용 - 사용자가 요소를 클릭하고 있는 동안 적용

:hover
- 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용 - 요소 위로 마우스를 올렸을 때

:foucs
- 요소가 포커스를 받을 때(초점이 맞추어졌을 때) 스타일 적용

 

• 사용자 동작에 반응하는 가상 클래스의 순서
  : link > :visted > :hover > :active

 

2. 요소의 상태에 따른 가상 클래스 선택자

:checked
- 체크박스 또는 라디오 버튼 같은 입력 요소가 선택되었을 때 적용
:enabled, :disabled
- 요소의 사용 여부에 따라 스타일 적용

:target
- url에 특정 id가 포함되어 있을 때, 그 id를 가진 요소에 스타일을 적용
- 앵커(a요소)로 연결된 부분에 스타일 적용

:enabled, :disabed
- 입력 필드의 활성화 상태에 따라 다른 스타일 적용

:checked
- 라디오버튼이나 체크박스에 체크했을 때 스타일 적용

 

가상 요소

 

화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상 요소 사용

:first-child
- 부모 요소의 첫 번째 자식 요소

:last-child
- 부모 요소의 마지막 자식 요소

:nth-child('n')
- 부모 요소의 'n'번째 자식 요소

:nth-of-type('n')
- 특정 유형의 n번째 요소

:not(selector)
- 지정된 선택자에 해당하지 않는 모든 요소를 선택
ex) :not(.class) - class 속성이 없는 모든 요소