반응형
1. active: 대상을 클릭하고 있는 상태
2. hover: 마우스가 대상위에 있을 때
3. focus : active와 비슷하나, 키보드로 선택되었을때
4. visited : 링크에만 적용되며, 방문한적이 있을 때
5. focus-within: focuse 된 자식을 가진 부모 엘리먼트의 상태. ex. form은 그 자식인 inputdl focus가 되면 form의 모습을 바꾼다
6. 다른 엘리먼트와 연계사용이 가능하다.
- 부모의 state에 따라 조정
form: hover input{
background-color : teal;
부모인 form 이 hover일 경우 input의 백그라운드 컬러를 변경
}
- 부모와 자식의 state에 따라 조정
form:hover input:focus{
background : teal;
}
부모인 form이 hover 이고input이 focus 인경우 컬러를 변경
반응형
'html, css, bootstrap' 카테고리의 다른 글
css_flex 다시정리 (0) | 2022.11.21 |
---|---|
css_transition (0) | 2022.11.11 |
css_position (0) | 2022.11.11 |
css_flexbox (0) | 2022.11.11 |
html_form,input (0) | 2022.11.11 |