css 가상 선택자

1. 가상 클래스 (Pseudo-class)

엘레멘트의 특정한 상태를 정의할 때 사용. 

ex)

- 마우스가 엘레멘트의 위로 올라왔을 경우

- 엘레멘트가 포커스를 받을 때, 놓쳤을 때

selector:pseudo-class {
	attrib : value
}

selector 부분에 CSS 클래스가 들어갈 수 있음. (ex> p.cname)

링크 가상 클래스

/* unvisited link */
a:link { color: #FF0000; }

/* visited link */
a:visited { color: #00FF00; }

/* mouse over link */
a:hover { color: #FF00FF; }

/* selected link */
a:active { color: #0000FF; }

hover는 link, visited 이후에 선언되야 하며, active는 hover 이후에 선언되어야 함.

:lang(language-code) - 페에지 언어에 따른 설정

:first-child - 상위 엘레멘트에 대해 첫번째 엘레멘트가 선택됨.

E:nth-child(n) - 형제요소 개수로 n 번째 엘레멘트를 선택

E:nth-of-type(n) - E 요소만 포함한 형제요소 개수로 n 번째 엘레멘트를 선택

** nth-... : even, odd 를 사용하면 각각 반복적으로 선택 가능

---

2. 가상 엘레멘트 (Pseudo-elements)

ex)

첫번째 문자, 줄 또는 엘레멘트에 대한 서식 정의

엘레멘트의 이전과 그 다음이나 지정하고 싶은 곳에 컨텐츠 삽입

:: before / :: after - 각각 엘레멘트의 전과 뒤에 원하는 콘텐츠를 삽입할 수 있다.

h1::after {
    content: url(smiley.gif);
}

:: selection - 사용자가 현재 선택한 엘레멘트에 적용된다.

단, 적용할 수 있는 옵션이 다음으로 제한되어 있음. : color, background, cursor, outline

::selection {
    color: red; 
    background: yellow;
}