Study/HTML&CSS

[HTML/CSS] 가상 클래스 (pseudo class)

Rajin 2021. 11. 29. 15:28
728x90
  • 가상 클래스(pseudo class)
    • :link 선택자:
    • :visited 선택자:
    • :hover 선택자:
    • :active 선택자:
    • :focus 선택자:
    구조 가상 클래스(특성 위치에 있는 요소를 찾아 스타일 지정)
    • :enabled와 disabled 선택자:
    • Checked 선택자:
    • Root 선택자:
    • :nth-child(n)와 :nth-last-child(n) 선택자:
    • :nth-child(n) :
    • :nth-last-child(n) :
    • 해당 요소들이 모두 부모 요소를 갖고 있어야 한다.
    그 외 가상 클래스
    • :target 선택자: 앵커 목적지에 스타일 적용
    • :not 선택자: 특성 요소가 아닐 때 스타일 적용(괄호 안에 있는 요소 제외) | p:not(#ex) {color:blue;}
    • 가상요소 | 내용 일부만 선택해 스타일 적용할 때 사용, 클래스 이름 앞에 콜론 두 개(::)를 붙여서 표시
    • ::first-line와 ::first-letter 요소: 첫 번째 줄, 첫 번째 글자에 스타일 적용 | ::first-letter에서 첫 번째 글자는 반드시 첫 번째 줄에 있어야 함
    • ::before, ::after요소: 내용 앞 뒤에 콘텐츠(text, img 등) 추가
  • 사용자 동작에 반응하는 가상 클래스