[CSS] 의사 클래스(pseudo-class)

 

• 의사 클래스(pseudo-class)

    - '가짜의', '유사한' 의미를 갖는 pseudo에서 유래한 말

    - 일반적인 언어(자연어)로 코드를 작성하는 '가짜 코드'라는 의미

    - 선택하고자 하는 HTML요소의 특별한 '상태(state)'를 명시할 때 사용

 

[문법]

선택자:의사클래스명{속성: 속성값;} 선택자.class명:의사클래스명{속성: 속성값;} 선택자#id명:의사클래스명{속성: 속성값;}

 * 클래스(class)나 아이디(id)에도 사용가능

 * 의사클래스명은 대소문자 구분 없음

 

 

 

 

• 의사클래스 종류

    1. 동적 의사 클래스(dynamic pseudo-classes)

       * 동적 의사 클래스는 아래에 적힌 순으로 나열해야 정상적으로 작동

        :link

         사용자가 아직 한번도 이 링크를 통해 연결된 페이지에 방문하지 않은 상태

        :visited

         사용자가 한번이라도 이 링크를 통해 연결된 페이지에 방문한 상태

        :hover

         사용자의 마우스 커서가 링크 위에 올라가 있는 상태

        :active

         사용자가 마우스로 링크를 클릭하고 있는 상태

        :focus

         키보드나 마우스 이벤트 또는 다른 형태로 해당 요소가 포커스를 가지고 있는 상태

 

    2. 상태 의사 클래스(UI element states pseudo-classes)

       * input요소만 적용

       * 입력된 상태에 따라 별도로 스타일 설정 가능

        :checked

         체크된 상태의 input 요소

        :enabled

         사용할 수 있는 상태의 input 요소

        :disabled

         사용할 수 없는 상태의 input 요소

 

    3. 구조 의사 클래스(structural pseudo-classes)

       * HTML요소의 계층 구조에서 특정 위치에 있는 요소 선택 가능

        :first-child

         모든 자식 요소 중 첫번째에 위치하는 자식요소 모두 선택

        :last-child

         모든 자식 요소 중 맨 마지막에 위치하는 자식 요소 모두 선택

        :nth-child

         모든 자식 요소 중 앞에서부터 n번째에 위치하는 자식 요소 모두 선택

        :nth-last-child

         모든 자식 요소 중 뒤에서부터 n번째에 위치하는 자식 요소 모두 선택

        :first-of-type

         형제 요소 중 자신의 유형과 일치하는 제일 첫번째 요소 선택

        :last-of-type

         형제 요소 중 자신의 유형과 일치하는 제일 마지막 요소 선택

        :nth-of-type

         같은 요소의 n번째에 해당되는 요소 선택

        :only-child

         자식 요소를 단 하나만 가지는 요소의 자식 요소 선택

        :only-of-type

         같은 요소를 단 하나만 가지는 요소의 자식 요소 선택

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 사이트
http://tcpschool.com/css/css_selector_pseudoClass
https://blog.naver.com/parang_1996/222429419533
https://blog.naver.com/znsl0326/221419929380
http://tcpschool.com/css/css_selector_structure