input:focus{
background-color: tomato;
}
a:visited {
color: tomato;
}
focus: 클릭됐을 때
hover: 커서 올려놨을 때
focus: 키보드로 선택했을 때(해당 칸에 머물 때)
visited: 방문한 웹사이트
form {
border: salmon solid 2px;
display: flex;
flex-direction: column;
padding: 10px;
}
form:focus-within{
border-color: seagreen;
}
focus-within : 해당 엘리먼트 안에 어떤 것이든 focus된다면
form:hover input{
border-color: seagreen;
}
form:hover input:focus{
background-color: seagreen;
}
부모 상태 & 자식 상태의 형태로 지정 가능.
input의 색이 바뀐다.
form 과 input의 순서를 바꾸면 안된다.