[CSS] 가상 클래스와 가상 요소

1. 가상 클래스(Pseudo Class)

https://www.w3schools.com/css/css_pseudo_classes.asp

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

 

클래스 속성에 따로 클래스명를 지정하지 않아도 기본적으로 제공되는 클래스

선택자뒤에 콜론(:)이 하나임

selector:pseudo-class {
	property:value;
}

 

Anchor 관련 가상 클래스 리스트

:link	방문하지 않은 링크
:visited	방문한 링크
:hover	마우스 커서가 요소 위에 있을 때
:active	요소가 활성화됬을 때(누르고 있을 때)
:focus	포커스가 맞추어 졌을때

* :hover는 :link와 :visited이후 정의 되어야함

* :active는 :hover이후에 정의 되어야함

 

요소상태에 따른 가상 클래스 리스트

:enable	요소를 사용할수 있을때
:disable	요소를 사용할 수 없을때
:checked	라디오 버튼이나 체크박스가 선택되었을 때

 

문서구조에 따른 가상 클래스 리스트

:nth-child(n), :first-child	앞에서부터 n번째 자식요소 (수식적용가능 2n+1), 첫번째
:nth-last-child(n), :last-child	뒤에서부터 n번째 자식요소, 마지막
:nth-of-type(n), :first-of-type	앞에서부터 특정태그 중 n번째 자식요소
:nth-last-of-type(n), :last-of-type	뒤에서부터 특정태그 중 n번째 자식요소
:target	앵커 목적지 태그

 

2. 가상 요소(Pseudo Element)

https://www.w3schools.com/css/css_pseudo_elements.asp

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

 

HTML 문서에 따로 추가하지 않아도 기본적으로 제공되는 요소

선택자뒤에 콜론(:)이 두개임

selector::pseudo-element {
	property:value;
}

 

가상요소 리스트

::first-line	텍스트의 첫번째 줄
::first-letter	텍스트의 첫번째 문자
::before	특정 요소 바로 앞의 가상요소
::after	특정 요소 바로 뒤의 가상요소
::selection	사용자에 의해서 선택된 요소 부분