[CSS]가상 클래스/ 가상 요소

가상 클래스(pseudo-class)

어떤 상태를 지정할 때 사용한다. 마우스를 올려 놓은 상태(:hover), 방문하지 않은 링크를 나타내는(:link) 등 문서상에 있는 것이 아니라서 가상 선택자라고 부른다.

 

:link, :visited

:link

방문하지 않은 링크의 상태를 나타낼 때 사용

 

:visited

방문한 링크의 상태를 나타낼 때 사용.

 

:active, :hover

:active

마우스로 클릭한 상태

 

:hover

마우스를 위에 올린 상태

 

:focus

키보드 포커스를 가질 때

 

:first-child, :last-child, nth-child(n)

 

가상 요소(::)

실제로 존재하는 않는 요소를 만들어 준다.

가상 요소는 inline 요소이므로 block 성질이 필요하면 display:block을 지정해줘야한다.

 

::after

::before

::first-line

::first-letter

 

참고 사이트

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

[공유]::before와::after, 그들의 정체는?