선택자:의사클래스이름 {속성: 속성값;}
.btn:hover {
background : chocolate; /*마우스를 갖다댔을 때*/
}
.btn:focus {
background : red; /*커서가 찍혀있을 때*/
}
.btn:active {
background : brown; /*누르고 있을 때*/
}
a:link {
color : red; /*방문 전 a 링크*/
}
a:visited {
color : black; /*방문 후 a 링크*/
}
pseudo class 셀렉터를 붙이면 여러 상태에 따른 스타일을 지정해 줄 수 있다.
👉 순서는 꼭 이런식으로 해야 오류없이 잘 동작한다.
클래스(class)나 아이디(id)에도 의사 클래스(pseudo-class)를 사용할 수 있다.
선택자.클래스이름:의사클래스이름 {속성: 속성값;}
선택자#아이디이름:의사클래스이름 {속성: 속성값;}
의사 클래스 - CSS: Cascading Style Sheets | MDN
.btn {
padding : 10px;
font-size : 18px;
border : none;
border-radius : 5px;
cursor : pointer;
}
.btn-red {
background-color : red;
color : white;
}
.btn-blue {
background-color : blue;
color : white;
}