so woon!

[의사 클래스] Checked 의사 클래스(Pseudo Class) 본문

CSS/개념정리

[의사 클래스] Checked 의사 클래스(Pseudo Class)

xowoony 2022. 9. 6. 23:23

학습일 : 2022. 09. 05

Checked 의사 클래스
Checked 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 체크 되어 있는 상태에 대한 선택자이다.
주로 type이 checkbox인 input을 위해 사용한다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

 "선택자":checked {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>checked 의사 클래스</title>
    <style>
        .checkbox:checked❤ {
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <input class="checkbox" type="checkbox">❤
</body>
</html>

==============실행결과=============

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'CSS > 개념정리' 카테고리의 다른 글

[의사 클래스] first-child 및 nth-child, last-child 의사 클래스  (0) 2022.09.07
[의사클래스] disabled 의사 클래스  (0) 2022.09.07
[의사 클래스] Active 및 Hover 의사 클래스  (0) 2022.09.06
[속성] position 및 top, right, bottom, left 속성  (0) 2022.09.06
[속성] width 및 height 속성  (0) 2022.09.06
'CSS/개념정리' Related Articles more
Comments