정적인 가상 class
:link
아직 방문하지않은 앵커
:visited
이미 방문한 앵커
예) a:visited { color : red;}
방문한 앵커의 색깔을 red로 바꾼다.
첫번째 자식 요소에 대한 가상 class
:first-child
아무 element나 첫 번재 자식관계에 해당하는 element를 선택한다
예) <div>
<a href="#">click</a>
</div>
a:first-child { font-weight : bold;}
아무 element(여기선 div element)의 첫번째 자식 관계인 element가 a 이므로 해당하는 a의 글씨에 bold효과를 준다.
언어를 이용한 가상 class
:lang
사용된 언어를 기반으로 선택한다. 특정속성 선택자인 |= 와 같은방식으로 동작한다.
예) *:lang(en) { font-style : italic;}
영어로 작성된 모든 elemenet에 italic효과를 준다.
동적인 가상 class
:focus
현재 focus를 갖고있는 element
:hover
마우스 포인터가 위치해 있는 element
:active
입력에 의해 active된 element
예) a:link { color : navy;}
방문하지않은 앵커의 색깔을 navy로 한다.
a:visited { color : gray;}
방문한 앵커의 색깔을 gray로 한다.
a:hover { color : red;}
현재 마우스포인터가 올라와있는 앵커의 색깔을 red로 바꾼다.
a:active { color : yellow;}
입력에 의해 앵커가 활성화된경우 앵커의 색깔을 yellow로 바꾼다.
처음 두개는 정적인 가상 class를 이용했고, 아래 두가지는 동적인 가상 class를 이용한다.
요즘의 추세는 [link-visited-focus-hover-active] 순으로 바뀌고 있지만,
일반적으로는 [link-visited-hover-active]순서로 사용하는것을 권장한다.
동적인 가상 class는 element의 종류에 상관없이 적용된다.
가상 class는 조합해서 사용이 가능하다
예) a:link:hover { color : maroon;}
방문하지 않은 링크 위에 마우스가 위치할때 색깔을 maroon으로 변경한다.
가상요소 선택자
첫 번째 글자에 스타일 지정
:first-letter
예) p:first-letter { color : white;}
p태그의 첫 번째 글자색을 white로 바꾼다.
첫 번째 줄에 스타일 적용하기
:first-line
예) p:first-line { color : red;}
p태그의 첫 번째 줄 글자색을 red로 바꾼다.
:first-letter와 :first-line은 inline elemement에선 사용이 불가능하고 block element에만 사용할수 있다.
또한 모든 가상요소는 선택자의 끝에서만 사용될 수 있다.
예) p:first-line strong
가상요소가 끝에오지않고 앞에왔으므로 유효하지 않다.
요소의 앞,뒤에 스타일 적용하기
:before
element앞에 효과를 적용한다.
:after
element뒤에 효과를 적용한다.
예) h1:before { content : "*"}
h1앞에 *을 덧붙인다.
h1:after { content : "!"}
h1뒤에 !을 덧붙인다.
