Pseudo classess & Pseudo elements

배경 지식

element : <tag>content</tag> 전체를 의미

 

selector:pseudo-class

특정한 상황이 되면 selector에 자동으로 추가되는 클래스. 물론 내부적으로만 동작하기 때문에 문서상으로는 보이지 않는다.

 

Example

a:hover {font-weight:bold;}

마우스를 올려 놓으면 selector a에 hover class가 내부적으로 추가된다.

 

이 때 위의 CSS 코드에 의해 font-weight:bold 가 적용된다.

 

selector::pseudo-element

 

특정한 상황이 되면 selector 내부의 특정 부분에 자동으로 추가되는 element. 물론 내부적으로만 동작하기 때문에 문서상으로는 보이지 않는다.

 

Example

p::first-letter {font-size:3em;}

<p>Hello, world!</p>

 

<p>Hello, world!</p> 내부의 첫 글자 H에 <first-letter></first-letter> element가  내부적으로 추가된다. 즉, 내부적으로 <p><first-letter>H</first-letter>ello, world!</p>가 된다.

 

이 때 위의 CSS 코드에 의해 font-size:3em 이 적용된다.