CSS 선택자 의사 클래스

    2018-02-21 18:12:48 작성

    의사 클래스

    의사 클래스는 요소의 특수 상태를 정의하는데 사용됩니다. 예를 들어 다음과 같이 사용할 수 있습니다.

    • 사용자가 요소에 마우스를 올리면 요소의 스타일을 지정합니다.
    • 링크가 사용자가 이미 방문한곳과 방문하지 않은곳의 스타일을 다르게 지정합니다.
    • 요소가 포커스를 얻으면 스타일을 다르게 지정합니다.

    의사 클래스는 요소뒤에 :를 붙여 사용합니다.


    :link
    a:link { ... }

    해보기
    방문하지 않은 링크에 적용합니다.
    :link 선택자는 <a> 요소만 적용됩니다.


    :visited
    a:visited { ... }

    해보기
    사용자에 의해 방문한 적이 있는 링크에 적용합니다.
    :visited 선택자는 <a> 요소만 적용됩니다.


    :hover
    a:hover { ... }

    해보기
    마우스 커서가 요소를 지정하는 동안 적용합니다.


    :active
    a:active { ... }

    해보기
    사용자에 의해 요소가 활성화 되는 동안(마우스 버튼 누름) 적용합니다.


    :focus
    input:focus { ... }

    해보기
    요소가 포커스를 가지고 있는 동안 적용합니다.


    :root
    :root { ... }

    해보기
    문서의 루트 요소와 일치합니다.
    HTML에서 루트 요소는 항상 <html> 요소입니다.


    :target
    :target { ... }

    해보기
    앵커에 #id 가 붙은 URL의 경우 문서내 특정 요소와 연결되며, 현제 활성화된 target 요소의 스타일을 지정합니다.


    :lang(language)
    :lang(ko) { ... }

    해보기
    lang 속성이 ko 인 요소를 선택합니다.


    :not(selector)
    :not(p) { ... }

    해보기
    p 요소가 아닌 모든 요소 선택합니다.