[HTML+CSS] 가상의 선택자

▶ 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.

 

그중에서 아래에 있는 예시는 가장 많이 사용하고 있는 가상클래스에 대한 정보 입니다.

 

• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1) - 홀수 번째 자식

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때
• :focus - 포커스 되었을 때 (input 태그 등)

 

 

▶ 사용법

 

선택자 : 가상 이벤트

 

▶ 예시

 

 

See the Pen by yeojinho (@yeojinho) on CodePen.