3. CSS (가상 클래스, 가상 요소)

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

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

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

:link

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

 

:visited

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

 

:active

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

 

:hover

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

 

:foucs

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

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

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

:checked

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

:target

- url에 특정 id가 포함되어 있을 때, 그 id를 가진 요소에 스타일을 적용

- 앵커(a요소)로 연결된 부분에 스타일 적용

       

:enabled, :disabed

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

     

:checked

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

 

3 . 가상 요소

:first-child

- 부모 요소의 첫 번째 자식 요소

 

:last-child

- 부모 요소의 마지막 자식 요소

 

:nth-child('n')

- 부모 요소의 'n'번째 자식 요소

 

:nth-of-type('n')

- 특정 유형의 n번째 요소 :not(selector)

- 지정된 선택자에 해당하지 않는 모든 요소를 선택

ex) :not(.class) - class 속성이 없는 모든 요소