Pseudo-Classes

  • 동적으로 채워지거나 트리 구조에 의존하는 element
a:hover {}

hover는 스타일이 변한다.

Types of Pseudo-Classes

  • Link
    • :link, :visited
  • User Action
    • :hover, :active, :focus
  • Forms (interfaces)
    • :enabled, :checked, :disabled
  • Structural / Positional
    • :first-child, :last-child, :nth-child(), :only-child
    • :first-of-type, :last-of-type, :only-of-type
li:first-child{}
li:nth-child(4){}
p:empty{}
img:only-of-type{}
  • Textual
    • :first-letter, :first-line
  • Positional / Generated
    • :before, :after
  • Fragments
    • ::selection

Review

  • Pseudo-element and classes는 페이지에 스타일을 더 추가하는 것
  • 모든 결합은 커버 안된다.
    그래서 스스로 일부 조사해야 한다.

공부 위치 – https://www.coursera.org/learn/introcss/lecture/jE7LQ/03-01-pseudo-classes-and-elements