css11

css 셀럭터2

가상 클래스와 가상 요소

  • 1사용자 동작에 반응하는 가상 클래스
    :link 방문하지 않은 링크에 스타일 적용
    :visited 방문한 링크에 스타일 적용
    :hover 마우스를 올려놓았을 때 적용
    :active 클릭하는 순간 적용
    이 순서대로 적용하자!
    :focus 키보드 탭을 눌러 이동했을 때 적용
  • 2ul 요소 상태에 따른 가상 클래스
    :enabled,disabled 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
    :checked 라디오 박스나 체크 박스에서 항목을 선택했을 때의 스타일 지정
  • 1구조 가상 클래스
    :nth-child(n)와 :nth-last-child(n)
    숫자, 홀수(odd, 2n+1), 짝수(even,2n)....

    :nth-of-child(n)와 :nthi-last-of-type(n)
    ex)p:nth-of-child(2) p태그 기준으로 2번째

    :first-child와  :last-child

    :first-of-type(n)와  :last-of-type(n)
    형제 요소들 중 첫번째/마지막 요소에 스탕리 적용

    :only-child와 only-of-type
    부모 요소 안에 자식 요소가 유일하게 하나일 때(외동)
    p요소가 오직 하나 뿐일 때(다른 자식 있어도 됨)

    ::before 특정 요소의 앞에 지정한 내용을 추가
    ::after 특정 요소 뒤에 지정한 내용을 추가