링크 동적 의사 클래스 (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]) {...}
댓글 없음:
댓글 쓰기