CSS3 : 검사되지 않은 의사 클래스

108

공식 CSS3 :checked의사 클래스 가 있다는 것을 알고 있지만 :unchecked의사 클래스가 있으며 동일한 브라우저 지원이 있습니까?

Sitepoint의 참조 에는 하나가 언급되어 있지 않지만이 whatwg 사양 (그것이 무엇이든)이 수행합니다.

:checked와 :not()의사 클래스가 결합 될 때 동일한 결과를 얻을 수 있다는 것을 알고 있지만 여전히 궁금합니다.

input[type="checkbox"]:not(:checked) {
    /* styles */
}

편집하다:

w3c는 동일한 기술을 권장합니다.

선택되지 않은 체크 박스는 부정 의사 클래스를 사용하여 선택할 수 있습니다.
:not(:checked)

css css-selectors pseudo-class

— 웹 디자이너
소스

104

:unchecked 선택기 또는 CSS UI 레벨 3 사양에 정의되어 있지 않으며 선택기의 레벨 4에도 나타나지 않았습니다.

사실, W3C의 인용문 은 Selectors 4 spec에서 가져온 것입니다 . 선택기 4 는 사용을 권장 하므로 :not(:checked)해당 :unchecked의사 가 없다고 가정하는 것이 안전합니다 . :not()및 :checked에 대한 브라우저 지원 은 동일하므로 문제가되지 않습니다.

이것은과 일치하지 보일 수 :enabled및 :disabled요소가 될 수있다, 특히 이후 상태 둘 다 활성화되지 않고 (즉, 의미가 완전히 적용되지 않습니다) 장애인 그러나이 불일치에 대한 설명이있을 나타나지 않습니다.

( :indeterminate의미가 적용되지 않기 때문에 요소가 유사하게 선택 해제되거나 확인되거나 결정되지 않을 수 있기 때문에 계산되지 않습니다.)

— BoltClock
소스

이 답변에 추가하면 : not (: checked) 선택이 Chrome에서 완벽하게 작동하지만 IE에서는 작동하지 않습니다 (9 및 11에서 테스트 됨).

— Bruno Finger

@Bruno Finger : : checked 및 : not (: checked) 둘 다 IE에서 작동해야합니다. 단, 둘 다 확인 된 상태를 변경해도 확인 된 / 확인되지 않은 요소와 관련하여 대상이되는 요소의 스타일이 업데이트되지 않는 버그의 영향을받는 것을 제외하고는 모두 IE에서 작동합니다. 요소.

— BoltClock

35

나는 당신이 일을 지나치게 복잡하게하려는 것 같아요. 간단한 해결책은 기본적으로 체크되지 않은 스타일로 체크 박스의 스타일을 지정한 다음 체크 된 상태 스타일을 추가하는 것입니다.

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

나는 오래된 스레드를 불러 온 것에 대해 사과했지만 더 나은 답변을 사용할 수 있다고 생각했습니다.

수정 (2016 년 3 월 3 일) :

W3C 사양 :not(:checked)은 체크되지 않은 상태를 선택하는 예를 들어 설명합니다. 그러나 이것은 명시 적으로 선택되지 않은 상태이며 이러한 스타일은 선택되지 않은 상태에만 적용됩니다. 이것은 체크되지 않은 상태에서만 필요하고 input[type="checkbox"]선택기에서 사용되는 경우 체크 된 상태에서 제거되어야하는 스타일을 추가하는 데 유용합니다 . 자세한 내용은 아래 예를 참조하십시오.

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

:not(:checked)위의 예제에서 사용하지 않았다면 :checked선택자는 border: none;동일한 효과를 얻기 위해 a 를 사용해야했습니다 .

input[type="checkbox"]중복을 줄이려면 for 기본 스타일을 사용하십시오 .

input[type="checkbox"]:not(:checked)선택 상태에 적용하지 않으려는 명시 적 선택 취소 스타일 에는 을 사용하십시오 .

— 마이클 스트라 멜
소스

하지만 유용하고 표현적인 CSS 선택기의 다른 용도가 있습니다 : 자바 스크립트, 자동화 된 브라우저 테스트

— nruth

2

항상 가능한 것은 아닙니다. 특히 양식 요소는 계단식 규칙을 통해 기본 모양과 느낌으로 되 돌리는 것을 허용하지 않는 것으로 유명합니다. (누군가가 체크 또는 체크되지 않은 입력에만 커스텀 룩앤필을주고 다른 민트는 남겨두고 싶어하는 이유는 저를 넘어선 것입니다.)

— BoltClock

이것이 불가능한 또 다른 경우 : 2 개 이상의 라디오 버튼. 예를 들어, 옵션 # 1이 : checked 일 때 하나의 스타일을 원하고 다른 것이 : checked 일 때 다른 스타일을 원할 수 있습니다. 이 솔루션은:not(:checked)

— 나빈

당신은 스타일 만 원하는 특정의 사람을하고자한다면, 왜 사용하지 :first-child, :last-child또는 :nth-child조합에서 선택을 :checked. :not(:checked)귀하의 의견을 오해하지 않는 한 귀하가 지정한 상황을 다루지 않습니다.

— Michael Stramel

@MichaelStramel이 html의 순서를 CSS에 넣었습니까?

— 아니요

3

: unchecked 의사 클래스는 없지만 : checked 의사 클래스와 형제 선택기를 사용하면 두 상태를 구별 할 수 있습니다. 나는 모든 최신 브라우저가 : checked 가상 클래스를 지원한다고 믿습니다.이 리소스에서 더 많은 정보를 찾을 수 있습니다 : http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

jquery로 더 나은 브라우저 지원을 얻을 수 있습니다 ... 클릭 기능을 사용하여 클릭이 발생하는 시점을 감지하고 선택 여부를 감지 한 다음 필요에 따라 클래스를 추가하거나 클래스를 제거 할 수 있습니다.

— 제프 우든
소스

-2

이것을 처리하는 방법은 조건에 따라 레이블의 className을 전환하는 것입니다. 이렇게하면 하나의 레이블 만 필요하고 다른 주에 대해 다른 클래스를 가질 수 있습니다. 도움이되기를 바랍니다.

— 다니엘 램
소스