CSS Selectors (3)

안녕하세요. 오늘은 CSS Selectors의 마지막 고급 선택자인

 

가상 클래스와 가상 요소에 대해 알아볼게요.

 

 

 

가상 클래스

 

가상 클래스는 특정 상태의 HTML 요소에 스타일 적용하기 위해 사용해요.

 

그리고 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분해요.

 

 

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

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

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

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

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

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

사용자 동작에 반응하는 가상 클래스의 순서
: link > :visited > :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 속성이 없는 모든 요소

 

 

여기까지 CSS Selectors의 마지막 

 

가상 클래스와 가상 요소에 대해 알아봤는데요.

 

실제 스타일링에 다행하게 활용되는 만큼,  꼭 기억해 두시면 유용하게 쓰이실 거예요.