CSS 선택자 고급 - 전체 가상 클래스(Pseudo Class) 선택자 요약
입력 요소(<input>) 가상 클래스
| 가상 클래스 | 설명 | 예 |
| :checked | 체크한 입력 요소()를 선택. 라디오박스와 체크박스 한정 |
input:checked form input[type="radio"]:checked .item:checked+label |
| :disabled | 사용 불가 상태인 입력 요소()를 선택. | input:disabled |
| :enabled | 사용 가능 상태입 입력 요소()를 선택. :disabled 로 설정하지 않은 입력 요소는 모두 :enabled 임. |
input:enabled |
| :focus | 포커스가 위치한 입력 요소()를 선택. 마우스 클릭, 또는 탭 키로 활성화 된 입력 요소 1개를 선택. |
input:focus |
| :in-range | 특정 범위 안의 값을 가진 입력 요소()를 선택. 입력 값의 범위를 가지는 입력 요소 한정으로 사용되며, 입력 요소 속성 min, max 값으로 범위를 지정함. 자바스크립트 없이 입력 값의 사전 체크를 할 수 있음. |
input:in-range |
| :invalid | 비 정상 값을 가진 입력 요소()를 선택. 타입이 지정된 입력 요소에 올바르지 않은 값이 들어간 경우 선택됨. |
input:invalid |
| :optional | 필수 항목 속성(required)이 지정되지 않은 입력 요소()를 선택. |
input:optional |
| :out-of-range | 특정 범위를 벗어난 값을 가진 입력 요소()를 선택. 입력 값의 범위를 가지는 입력 요소 한정으로 사용되며, 입력 요소 속성 min, max 값으로 범위를 지정함. 자바스크립트 없이 입력 값의 사전 체크를 할 수 있음. |
input:out-of-range |
| :read-only | 읽기 전용 속성(readonly)이 적용된 입력 요소()를 선택. 입력 요소에 읽기 전용 속성은 "readonly" 키워드를 사용하며, 가상 클래스는 "read-only"를 사용하는 점에 주의해야 함. |
input:read-only |
| :read-write | 읽기 전용 속성(readonly)이 적용되지 않은 입력 요소()를 선택. :read-only 가상 클래스에 대응. | input:read-write |
| :required | 필수 항목 속성(required)이 지정된 입력 요소()를 선택. :optional 가상 클래스에 대응. |
input:required |
| :valid | 정상 값이 입력된 모든 입력 요소()를 선택. | input:valid |
링크 가상 클래스
| 가상 클래스 | 설명 | 예 |
| :active | 활성화 된 링크. , |
a:active |
| :hover | 마우스 호버 상태인 링크. | a:hover p:hover .item:hover |
| :link | 방문하지 않은 링크. | a:link |
| :visited | 방문한 링크. | a:visited |
요소(들) 선택 가상 클래스
| 가상 클래스 | 설명 | 예 |
| :empty | 자식 요소가 없는 요소를 선택 | p:empty div:empty |
| :first-child | 부모 요소의 첫 번째 자식 요소를 선택 | p:first-child article p:first-child .item:first-child |
| :first-of-type | 부모 요소의 자식 요소들 중 특정 태그 타입의 첫 번째 요소를 선택. 클래스로 자식 요소를 선택 시, 자식 요소들의 모든 태그 타입별로 첫 번째 요소를 선택함. | p:first-of-type .item:first-of-type |
| :last-child | 부모 요소의 마지막 자식 요소를 선택 | p:last-child |
| :last-of-type | 부모 요소의 자식 요소들 중 특정 태그 타입의 마지막 요소를 선택. 클래스로 자식 요소를 선택 시, 자식 요소들의 모든 태그 타입별로 첫 번째 요소를 선택함. | p:last-of-type .item:last-of-type |
| :not | 선택한 요소들 중 괄호 안의 조건에 해당 하는 것을 제외한 나머지 요소(들). :not(x) 로 조건을 표현. 조건으로는 태그, 클래스, 가상 클래스, 속성이 올 수 있음. |
p:not(".item") input:not(:disabled) |
| :nth-child | 서수로 n번째 오는 요소를 선택. 수식을 사용해 반복해서 요소(들)을 선택. |
p:nth-child(2n+1) |
| :nth-last-child | 서수로 n번째 오는 요소를 끝에서부터 선택. 수식을 사용해 반복해서 요소(들)을 선택. |
p:nth-last-child(2n+1) |
| :nth-last-of-type | 서수로 n번째 오는 특정 태그인 요소를 끝에서부터 선택. 수식을 사용해 반복해서 요소(들)을 선택. |
p:nth-last-of-type(2n+1) |
| :nth-of-type | 서수로 n번째 오는 특정 태그인 요소를 선택. 수식을 사용해 반복해서 요소(들)을 선택 |
p:nth-of-type(2n+1) |
| :only-child | 1개의 자식 요소만 가지고 있는 부모 요소의 자식 요소를 선택. 부모 요소의 자식 요소가 태그 종류에 관계 없이 1개만 있음. 유일한 자식 요소 "p:only-child" 으로 유일한 자식 요소를 선택. |
p:only-child .content div:only-child .item:only-child |
| :only-of-type | 자식 요소(들) 중 특정 태그가 1개만 있는 부모 요소의 자식 요소를 선택. 특정 태그 외에 다른 태그(들)이 있을 수 있음. ":only-child" 를 포함함. 유일한 문단 요소 "p:only-of-type" 으로 유일한 문단 요소선택. |
p:only-of-type |
| :root | 문서 루트 요소를 선택. | :root |
태그 속성 가상 클래스
| 가상 클래스 | 설명 | 예 |
| :lang | "lang" 속성에 지정된 언어 속성 값에 따라 요소를 선택. 다국어 페이지 지원을 위해 HTML 페이지 안에 다국어 내용을 모두 표시하는 경우, 내용을 구분하기 위해 사용하는 "lang" 속성을 구분해 선택하기 위해 사용.(영어: en, 한글: ko, 중국어: zh/zh-Hans/zh-Hant, 일본어: ja, 그외 ISO 639-1 언어 코드 표준(www.w3.org/WAI/ER/IG/ert/iso639.htm)을 따름) 한글내용 프랑스어내용 |
p:lang("ko") |
| :target | HTML 페이지 안의 앵커 링크를 클릭하면 앵커 요소를 선택. 탭 선택에 따라 탭 내용이 보이도록 하는 UI 구현이나 앵커 클릭시 필요한 메시지 내용을 표시하는데 사용. #msg{ display: none; } #msg:target { display: block; } 클릭 메시지 |
#msg:target |