728x90
반응형
가상 클래스 선택자
개요
선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.
- :link - 방문한 적이 없는 링크
- :visited - 방문한 적이 있는 링크
- :hover - 마우스를 롤오버 했을 때
- :active - 마우스를 클릭했을 때
- :focus - 포커스 되었을 때 (input 태그 등)
- :first - 첫번째 요소
- :last - 마지막 요소
- :first-child - 첫번째 자식
- :last-child - 마지막 자식
- :nth-child(2n+1) - 홀수 번째 자식
위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다.
사용법
.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }
transparent : 투명
728x90
반응형
'개발 > HTML.CSS' 카테고리의 다른 글
| CSS transform (0) | 2023.01.31 |
|---|---|
| CSS transition 기초 (0) | 2023.01.30 |
| CSS fadein fadeout (0) | 2023.01.24 |
| HTML (0) | 2023.01.16 |
| 새롭게 알게 된 HTML 태그 (0) | 2022.07.14 |