의사 요소
해당 HTML 요소의 특정 부분만을 선택
하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용 가능
선택자::의사요소이름 {속성: 속성값;}
::first-letter
텍스트의 첫 글자만을 선택
블록(block) 타입의 요소에만 사용
- font 속성
- color 속성
- background 속성
- margin 속성
- padding 속성
- border 속성
- text-decoration 속성
- text-transform 속성
- line-height 속성
- float 속성
- clear 속성
- vertical-align 속성 (단, float 속성값이 none일 경우에만)
::before
특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입
::after
특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입
::selection
해당 요소에서 사용자가 선택한 부분만을 선택
클래스
의사 클래스
CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시
의사 클래스의 이름은 대소문자를 구분하지 않음
선택자:의사클래스이름 {속성: 속성값;}
선택자.클래스이름:의사클래스이름 {속성: 속성값;}
선택자#아이디이름:의사클래스이름 {속성: 속성값;}
동적 의사 클래스(dynamic pseudo-classes)
- :link
- 링크의 기본 상태, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않음.
- :visited
- 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문
- :hover
- 사용자의 마우스 커서가 링크 위에 올라가 있는 상태
- 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작
- :active
- 사용자가 마우스로 링크를 클릭하고 있는 상태
- 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작
- :focus
- 키보드나 마우스의 이벤트(event) 또는 다른 형태, 해당 요소가 포커스(focus)를 가지고 있는 상태
상태 의사 클래스(UI element states pseudo-classes)
- :checked
- input 요소 중에서 체크된 상태의 input 요소를 선택
- :enabled
- input 요소 중에서 사용할 수 있는 input 요소를 선택:
- :disabled
- input 요소 중에서 사용할 수 없는 input 요소를 선택
구조 의사 클래스(structural pseudo-classes)
- :last-child
- 모든 자식(child) 요소 중에서 맨 마지막에 위치하는 자식(child) 요소를 모두 선택
- :nth-child
- 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택
- :nth-last-child
- 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택
- :first-of-type
- 모든 자식(child) 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택
- :last-of-type
- 모든 자식(child) 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택
- :nth-of-type
- 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택
- :nth-last-of-type
- 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택
- :only-child
- only-child는 자식(child) 요소를 단 하나만 가지는 요소의 자식(child) 요소를 모두 선택
- :only-of-type
- 자식(child) 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식(child) 요소를 모두 선택
- :empty
- 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택
- :root
- 해당 문서의 root 요소를 선택
기타 의사 클래스
- :not
- 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용하여 선택
- :lang
- 특정 HTML 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용
