'Not' 없이 CSS 선택기 탐색: 외부 입력 필드 선택

CSS에서 'not' 선택기는 인기 있는 기능입니다. 이를 통해 사용자는 일치 기준에서 특정 요소를 제외할 수 있습니다. 현재 JavaScript/jQuery를 사용하지 않는 한 브라우저에서 이 기능을 사용할 수 없습니다.

예를 들어 "classname" 클래스가 있는 요소 내의 모든 입력 필드를 선택하려면 CSS 코드는 다음과 같습니다.

.classname input {
  background: red;
}

이에 대응하기 위한 논리적인 다음 단계는 "classname" 요소 내의 입력 필드를 제외하는 것입니다. 그러나 "not" 선택기가 없기 때문에 대체 접근 방식 없이는 불가능합니다.

다음 코드에서 볼 수 있듯이 이러한 대안 중 하나는 JavaScript/jQuery입니다.

$j(':not(.classname) > input').css({background: 'red'});

이 코드는 "classname" 클래스가 있는 요소의 하위 항목이 아닌 모든 입력 필드를 선택합니다. "classname" 요소 외부의 모든 입력 필드에 빨간색 배경을 적용하는 원하는 결과를 효과적으로 달성합니다.

CSS에는 "not" 선택기가 없지만 JavaScript/jQuery의 가용성은 이러한 제한에 대한 솔루션을 제공합니다. , 특정 기준에 따라 요소를 정확하게 선택하고 수정할 수 있습니다.