[EricMeyerCSS] 가상요소, 가상클래스

가상요소, 가상클래스

1. 가상 요소, 가상 클래스란?

1) 가상 클래스(css 2.1 지원)

- :link //방문하지 않았던 링크 - :visited //방문했던 링크 - :hover // 마우스 올린요소 - :focus //포커스를 받은 요소 ..... h1:hover{ font-size :1px}

- 문서에 클래스를 추가한 것처럼 동작한다

- CSS3 에 많은 클래스가 추가되었다.

2) 가상 요소(css 2.1  지원)

- ::first-line - ::first-letter ..... h1::first-letter {font-size : 1px;}  

- 문서에 요소를 추가한 것처럼 동작한다.

- 2.1 이후 버전에서 앞의 문자 (:) 하나만 사용해도 된다.

2. 예제

//가상요소 사용 <h1>Hello World</h1> h1::first-letter {font-size : 25px;} //일반사용 h1 first-letter{font-size: 25px;} <h1><first-letter>H</first-letter>elloWorld</h1>  

- HelloWorld