pseudo-element
가상요소 = :
가상 요소의 종류는
구조 선택자, 반응 선택자 , 링크 선택자 , 부정 선택자
1. 구조 선택자
= 태그 구조 (ex. 부모자식관계 or 형제관계) 안에서 쉽게 선택할 수 있게 해준다.
부모 자식 관계
-
:first-child = 부모 자식 관계에서 첫번째 자식요소
-
:last-child = 부모 자식 관계에서 마지막 자식요소
-
:nth-child = 부모 자식 관계에서 n번째 자식요소
-
:nth-last-child = 부모 자식 관계에서 뒤에서 n번째 자식요소
형제 관계
-
:first-of-type = 형제 관계 중 첫째
-
:last-of-type = 형제 관계 중 마지막
-
:nth-of-type = 형제 관계 중에서 n번째
-
:nth-last-of-type = 형제 관계 중에서 뒤에서 n번째
2. 반응 선택자 ( 가장 많이 사용되는 듯 )
= 어떤 이벤트를 주었을 때 반응으로 생성되는 특정한 상태를 선택하는 선택자
- :hover = 사용자가 마우스를 올린 태그를 선택
- :active = 사용자가 마우스로 클릭한 태그를 선택
3. 링크 선택자
= 링크 걸린 요소들 선택
- :link = 링크가 걸린 요소
- :visited = 방문했던 링크가 걸린 요소들을 선택
4. 부정 선택자
= 선택자에 해당하지 않는 요소들을 선택
- :not = 선택한 요소
5. 상태 선택자
= 입력 양식의 상태를 선택할 때 사용하는 선택자
- :checked = 체크 상태의 녀석을 선택
- :focus = 초점이 맞추어진 녀석을 선택
- :enabled = 사용 가능한 녀석을 선택
- :disabled = 사용 불가능한 녀석을 선택
가상 클래스
가상 클래스 = ::
FEdev