[CSS] PSEUDO CLASS - 가상 클래스

 

가상 클래스 : 클래스 이름 앞에 콜론(:)을 붙여 표시

 

사용자 동작에 반응하는 가상 클래스

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

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

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

- :active : 웹 요소를 활성화했을 때 스타일 적용

- :focus : 웹 요소에 초점이 맞춰졌을 때 스타일 적용

 

UI 요소 상태에 따른 가상 클래스

- :enabled / :disabled : 요소를 사용할 수 있을 때 / 없을 때 스타일 지정

- :checked : 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정

 

구조 가상 클래스

- :root : 문서 전체에 적용

- :nth-child(n) / :nth-last-child(n) : 자식 요소의 위치에 따라 스타일 적용

- :nth-of-type(n) / :nth-last-of-type(n) : 특정 태그 위치에 스타일 적용

- :first-child / :last-child : 첫 번째 / 마지막 요소에 스타일 적용

- :first-of-type / :last-of-type : 형제 관계 요소의 위치에 따라 스타일 적용

- :only-child / :only-of-type : 자식 요소가 유일하게 하나일 때 / 해당 요소가 유일한 요소일 때 스타일 적용

 

그 외 가상 클래스

- :target : 앵커(같은 문서안에서 다른 위치로 이동할 때) 목적지에 스타일 적용

- :not(특정 요소) : 특정 요소를 제외한 스타일 적용

 

 

---

 

 

가상 요소 : 클래스 이름 앞에 콜론 두개(::)를 붙여 표시

 

가상 요소

- ::first-line / ::first-letter : 첫번째 줄 / 첫번째 글자에 스타일 적용

- ::before / ::after : 내용 앞 / 뒤에 콘텐츠 추가