[CSS] Pseudo Selectors (가상 선택자) - 가상 클래스 (pseudo class), 가상 요소 (pseudo element)

Pseudo Selectors (가상 선택자)

태그 이름이나 class, id를 쓰지 않고 선택자를 쓰는 법.

가상 클래스와 가상 요소로 나뉜다.

 

ex). 가상선택자 first-child 사용하기

animal li:first-child

① animal이라는 부모 안에 있는

② 첫번째 자식요소인

③ li에 대한 속성

 

첫번째 자식요소가 li가 아니라면

써먹을 수 없는 가상 선택자다.

 

	가상 클래스 (pseudo class)		가상 요소 (pseudo element)
문법	선택자:가상클래스명		선택자::가상요소명
쓰임	요소의 특정 상태에 대한 스타일을 설정할 때 쓴다.		선택한 요소의 일부분만 스타일을 다르게 할 때 쓴다.
종류	:active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type	:left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :target :target-within :user-invalid :valid :visited :where()	::after (:after) ::backdrop ::before (:before) ::cue ::cue-region ::first-letter (:first-letter) ::first-line (:first-line) ::grammar-error ::marker ::part() ::placeholder ::selection ::slotted() ::spelling-error

 

 

 

출처

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

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