정의 및 사용 방법

:enabled 가상 클래스 선택자는
HTML의 disabled 속성으로 인해 실제로 비활성화되지 않고 원래의 활성화 상태인 요소를 선택합니다.

반면, :disabled 가상 클래스 선택자는 비활성화된 요소를 선택합니다.

부연설명
HTML의 disabled 속성은 해당 요소나 해당 요소에 포함되어 있는 컨트롤 요소들을 비활성화합니다. 비활성화된 요소는 입력, 클릭, 선택 등 사용자가 요소와 상호작용하는 기능이 차단되는 특징이 있습니다.

:enabled은 아무 요소나 선택할 수 있는 것은 아니고 :disabled 가상 클래스로 선택할 수 있는 요소들 중에서 비활성화되지 않는 요소만 선택 가능합니다.

:enabled 가상 클래스는 비활성화된 요소와는 구분되는 스타일을 적용하기 위해 명시적인 선택자로 주로 사용됩니다.

기본 예제

다음은 비활성화된 버튼과 그렇지 않고 활성화 상태인 버튼의 스타일을 대조적으로 적용하기 위해 :enabled 가상 클래스 선택자를 사용한 예제입니다.

CSS 
button:enabled {
    border: 1px solid #777;
    background: yellowgreen;
}
button:disabled {
    border: 1px solid gray;
    background: silver;
    opacity: 0.7;
}
HTML 
<button>활성화 상태인 버튼</button>
<button disabled>비활성화된 버튼</button>
실제 적용된 모습

구문

CSS 
:enabled {
    /* ... */
}

:enabled 가상 클래스 선택자는 HTML의 disabled 속성으로 인해 실제로 비활성화되지 않고 원래의 활성화 상태인 요소만 선택합니다.

즉, 아무 요소나 선택할 수 있는 것은 아니고 disabled 속성으로 인해 실제로 비활성화될 수 있는 요소들 중에서만 활성화 상태인 요소를 선택할 수 있습니다.

다음은 :enabled 가상 클래스 선택자로 선택할 수 있는 요소입니다.

브라우저 호환성

:enable 가상 클래스 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:enable 1 12 1 3.1

명세서

:enable 가상 클래스 선택자의 명세서 사양
명세서 사양
:enable Selectors Level 4
#enabled-pseudo

참고문헌

같이 보기