가상 클래스와 가상 요소

:active

요소가 활성화된 경우에 적용된다. 가장 일반적인 경우는 HTML문서에서 텍스트의 링크를 클릭하는 경우인데, 링크를 클릭하여 마우스 버튼을 누르고 있는 동안이 활성화된 상태이다. 다른 요소들도 이론적으로는 활성화가 가능하지만 실제로 CSS에서는 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 활성화된 요소
예제 :

a:active {color: red;}
*:active {background: blue;}

:after

요소의 컨텐츠 끝부분에 생성된 컨텐츠를 추가한다. 가상 요소는 기본적으로는 인라인이지만 display 속성을 사용하여 바꿀 수 있다.

형식 : 가상 클래스
생성결과 : 요소의 컨텐츠 끝부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :

a:external:after {content: " " url(/icons/globe.gif);}
p:after {content: " | ";}

:before

요소의 컨텐츠 시작부분에 생성된 컨텐츠를 추가한다. 가상 요소는 기본적으로는 인라인이지만 display 속성을 사용하여 바꿀 수 있다.

형식 : 가상 클래스
생성결과 : 요소의 컨텐츠 시작부분에 생성된 컨텐츠를 포함하는 가상 요소가 추가된다.
예제 :

a[href]:before {content: "[LINK]";}
p:before {content: attr(class);}

:first-child

특정 요소의 첫 번째 자식 요소만 선택해주는 가상 클래스이다. 예를 들어 p:first-child를 사용하면 특정 요소의 첫 번째 자식 요소인 p 요소를 선택한다. 일반적인 예상과 달리 문서요소에 있는 첫 번째 요소를 선택하는 것이 아니다. 이런 경우에는 p > *:first-child를 사용한다.

형식 : 가상 클래스
적용대상 : 특정 요소의 첫 번째 자식인 요소
예제 :

body *:first-child {font-weight: bold;}
p:first-child {font-size: 125%;}

:first-letter

요소의 첫 번째 글자에 스타일을 적용한다. 첫 번째 글자 앞에 나오는 구두점도 같이 스타일이 적용된다. 일부 언어에서는 하나의 문자로 다루어져야 되는 문자조합이 있기 때문에 사용자 에이전트는 :first-letter를 전부 적용해야 한다. CSS2.1 이전에는 :first-letter가 블록 레벨 요소에만 사용이 가능했었는데 CSS2.1에서 모든 요소에 적용이 가능하도록 확장했다. 적용 가능한 속성에는 한정이 있다.

형식 : 가상 클래스
적용대상 : 요소의 첫 번째 글자를 가지고 있는 가상 요소
예제 :

h1:first-letter {font-size: 125%;}
a:first-letter {text-decoration: line-through;}

:first-line

요소의 텍스트에서 단어의 숫자에는 관계없이 첫 줄에 스타일을 적용한다. :first-line은 블록 레벨 요소에만 사용이 가능하다. 적용 가능한 속성에는 한정이 있다.

형식 : 가상 클래스
적용대상 : 요소의 첫 줄을 가지고 있는 가상 요소
예제 :

p.lead:first-line {font-weight: bold;}

:focus

특정 요소가 포커스를 가지고 있는 동안 적용된다. HTML에서 텍스트 입력상자에 입력 커서가 생겨있는 경우, 즉 사용자가 글자를 입력하기 시작할 때를 의미한다. 링크 요소와 같은 다른 요소에도 포커스가 생길 수 있지만 CSS에서 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 포커스를 가진 요소
예제 :

a:focus {outline: 1px dotted red;}
input:focus {background: yellow;}

:hover

요소가 머무르는 상태인 경우, 즉 사용자가 요소를 활성화하지 않은 상태로 지정하는 경우에 적용된다. 일반적인 예로는 HTML에서 링크위로 마우스를 이동시키는 경우이다. 다른 요소에도 머무르는 상태가 가능하지만 CSS에서 정의하고 있지 않다.

형식 : 가상 클래스
적용대상 : 머무르는 상태인 요소
예제 :

a[href]:hover {text-decoration: underline;}
p:hover {background: yellow;}

:lang

언어의 인코딩을 선택한다. 언어 정보는 CSS에서 지정되지 못하고, 문서 내에 지정되거나 문서와 연관되어 있어야 한다. :lang는 언어 속성 선택자와 같다.

형식 : 가상 클래스
적용대상 : 언어 인코딩 정보와 연관된 요소
예제 :

html:lang(en) {background: silver;}
*:lang(fr) {quotes: '<< ' ' >>';}

:link

아직 방문하지 않은, 즉 사용자 에이전트의 히스토리에 있지 않은 URI를 가진 링크에 적용된다. :visited 상태와 서로 반대가 된다.

형식 : 가상 클래스
적용대상 : 아직 방문하지 않은 링크
예제 :

a:link {color: blue;}
*:link {text-decoration: underline;}

:visited

이미 방문한, 즉 사용자 에이전트의 히스토리에 있는 URI를 가진 링크에 적용된다. :link 상태와 서로 반대가 된다.

형식 : 가상 클래스
적용대상 : 이미 방문한 링크
예제 :

a:visited {color: purple;}
*:visited {color: gray;}