[CSS] 의사클래스(Pseudoclass)

고근호·2023년 9월 8일

의사클래스(Pseudoclass)

Active 의사 클래스

Active 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 마우스를 누르고 있는 상태(Mouse Down)일 때에 대한 선택자이다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":active {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

Hover 의사 클래스

Hover 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소에 마우스가 올라가 있는 상태 (Mouse Hover)일 때에 대한 선택자이다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":hover {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Active 및 Hover 의사 클래스</title>
    <style>
        .button {
            background-color: red;
            color: white;
            cursor: pointer;
            display: inline-block;
            padding: 0.625rem 1rem;
        }

        .button:hover {
            background-color: blue;
        }

        .button:active {
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="button">어떤 버튼</div>
</body>
</html>

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>

checked 의사 클래스

# 체크리스트

'body'의 내용은 'label' 태그 하나, 'input' 태그 하나, 'span' 태그 하나로 구성하세요.(10점)
"위 약관을 읽어보았고..." 텍스트를 클릭하여도 체크박스의 체크가 토글(Toggle)되게 하세요.(20점)
체크 박스가 체크되지 않은 상태라면 "위 약관.."텍스트의 색상을 빨간색으로 만드세요.(color:red;)(20점)
체크 박스가 체크된 상태라면 "위 약관을..." 텍스트의 색상을 초록색으로 만드세요.(color: green;)(50점)

클래스 및 ID 적극 활용 가능

test1 위 약관을 읽어보았고 이해하였으며 동의합니다.

Disabled 의사 클래스

Disabled 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소가 비활성화 되어 있는 상태에 대한 선택자이다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)
"선택자":disabled {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

Disabled 의사 클래스

first-child 의사 클래스

first-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 첫번째 요소를 선택하기 위해 사용한다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":first-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

nth-child 의사 클래스

nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
이때 순번은 1부터 시작한다.(0 아님)
가령 nth-child(2n + 1)이라는 값은 3,5,7,9...번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":nth-child(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

last-child 의사 클래스

last-child 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":last-child {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

first-child, nth-child, last-child 의사클래스

목록
첫번째
두번째
세번째
네번째

first-of-type, nth-of-type, last-of-type

first-of-type 의사 클래스

first-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":first-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

nth-of-type 의사 클래스

nth-child(n) 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 n번째 요소를 선택하기 위해 사용한다. 이 때 n 값은 1이상의 자연수 혹은 xn+y(이때 n은 자동 증가, x 배수와 y 오프셋), odd(홀수 번째), even(짝수 번째)로 지정가능하다.
이때 순번은 1부터 시작한다.(0 아님)
가령 nth-child(2n + 1)이라는 값은 3,5,7,9...번째 값을 의미하는데 n이 1부터 1씩 증가한다고 생각하면 됨.
단, n이 음수일 경우, 가령, nth-child(-n+3)은, (-0+3), (-1+3), (-2+3) 으로 그 값이 0을 초과할 때 -0부터 1씩 감소한다고 계산하면 됨.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":nth-of-type(3) {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

last-of-type 의사 클래스

last-of-type 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소들 중 마지막 요소를 선택하기 위해 사용한다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":last-of-type {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

first-of-type, nth-of-type, last-of-type 가상 클래스

메뉴
짜장면
짬뽕
중화비빔밥
마들렌

Not 의사 클래스

Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":not(:"다른 의사 클래스"){
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}
가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다.
- *:not(:last-child) {...}

not 의사 클래스

냉장고

청소기

세탁기

건조기

Focus 의사 클래스

Focus 의사 클래스(Pseudo Class)는 선택된 요소에 포커스(Focus)가 있을 때에 대한 의사 클래스이다.
다음과 같이 작성한다.("는 없는 것으로 한다.)
"선택자":focus {
"속성" : "속성 값";
"속성" : "속성 값";
"속성" : "속성 값";
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>focus 의사 클래스</title>
    <style>
        body {
            background-color: rgb(10,15,20);
            color: rgb(245,250,255);
        }

        input {
            background-color: rgb(20,25,30);
            border: 0.0625rem solid rgb(30,35,40);
            border-radius: 0.33rem;
            color: rgb(245,250,255);
            outline: none;
            padding: 0.5rem 0.75rem;
        }

        input:hover {
            background-color: rgb(25,30,35);
        }

        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>