의사(pseudo) 클래스

의사 클래스 선택자는 콜론(:)으로 시작합니다.

CSS Level
CSS 1, CSS 2, CSS 3

링크 동적 의사 클래스 (Link pseudo class)

:link

아직 방문하지 않은 링크를 선택합니다.
a.external:link {...}

:visited

사용자가 이미 방문한 링크를 선택합니다.



사용자 행위 동적 의사 클래스 (User action pseudo class)

:active

사용자가 링크를 누르는 등 활성화 상태입니다.

:hover

사용자가 마우스를 링크 위로 옮겼을 때 입니다. CSS 2.

:focus

링크가 포커스를 받은 상태입니다. CSS 2.




문서 구조 의사 클래스 (Structural pseudo class)

:first-child

:nth-child(1)과 동일합니다. CSS 2.


:last-child

:nth-last-child(1)과 동일합니다. CSS 3.


:root

문서의 최상위 요소를 나타냅니다. HTML 문서에서는 <html> 요소입니다. CSS 3.


:nth-child(an+b)

a, b값은 0보다 큰 숫자로 지정합니다. n은 0부터 1씩 증가하며 해당되는 요소들을 선택합니다. odd 또는 even을 사용할 수도 있습니다. a가 0인 때에는 앞 부분을 생략할 수 있습니다. CSS 3.
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

foo:nth-child(0n+5)   /* represents an element foo that is the 5th child
                         of its parent element */
foo:nth-child(5)      /* same */

:nth-last-child(an+b)

:nth-child()와 유사하지만 문서 트리의 뒤에서부터 헤아립니다. CSS 3.


:nth-of-type(an+b)

:nth-child()와 유사하지만 동일한 요소명 중에서만 헤아립니다. CSS 3.


:nth-last-of-type(an+b)

:nth-of-type()와 유사하지만 문서 트리의 뒤에서부터 헤아립니다. CSS 3.


:first-of-type

:nth-of-type(1)과 동일합니다. CSS 3.


:last-of-type

:nth-last-of-type(1)과 동일합니다. CSS 3.


:only-child

부모요소가 존재하고 그 부모요소에게 다른 자식 요소가 없는 경우입니다. :first-child:last-child와 동일합니다. CSS 3.


:only-of-type

부모요소가 존재하고 그 부모요소에게 동일한 요소명을 가진 다른 자식 요소가 없는 경우입니다. :first-of-type:last-of-type와 동일합니다. CSS 3.


:empty

자식요소를 갖지 않는 요소를 선택합니다. CSS 3.





UI 요소 상태 의사 클래스 (UI element states pseudo class)

:enabled

사용자 인터페이스 요소가 사용 가능 상태인 경우입니다. CSS 3.


:disabled

사용자 인터페이스 요소가 사용 불가능 상태인 경우입니다. CSS 3.


:checked

라디오 요소 또는 체크박스 요소중 선택된 상태인 요소를 선택합니다. CSS 3.


:indeterminate

라디오 요소 또는 체크박스 요소 중 선택 여부가 결정되지 않은 상태입니다. CSS 3.




:lang

문서의 언어 별로 각각의 스타일을 지정할 수 있습니다. HTML 문서의 <meta>요소 또는 lang 속성 값, HTTP 헤더 등에 따라 문서의 언어가 결정됩니다. CSS 2.
html:lang(fr-be) {...}
html:lang(de) {...}
:lang(fr-be) > q {...}
:lang(de) > q {...}

:target

샆(#) 기호를 포함해서 문서 내의 위치를 가리키는 앵커를 타겟이라고 합니다. CSS 3.
*:target { color : red; }
*:target::before { content : url(target.png); }

:not()

부정 의사 클래스 입니다. CSS3.
button:not([DISABLED]) {...}

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.