기준을 충족하지 않는 요소에 대해 CSS 스타일을 선택하기 위해 :not pseudo-class 선택기를 사용하는 방법

조건을 충족하지 않는 요소에 대해 CSS 스타일을 선택하기 위해 :not 의사 클래스 선택기를 사용하는 방법

CSS에서는 선택기를 사용하여 특정 조건을 충족하는 요소를 선택한 다음 스타일을 적용하는 경우가 많습니다. 하지만 때로는 특정 기준에 맞지 않는 요소를 선택하고 다른 스타일을 적용해야 할 때도 있습니다. 이때 :not pseudo-class 선택자를 사용할 수 있습니다.

:not 의사 클래스 선택기를 사용하면 선택기 세트를 지정하여 일부 요소를 제외하고 이러한 선택기와 일치하지 않는 요소만 선택할 수 있습니다. 기본 구문은 다음과 같습니다.

:not(selector)

여기서 selector는 제외할 요소를 나타내는 유효한 CSS 선택기입니다. 태그 선택기, 클래스 선택기, ID 선택기 또는 기타 유형의 선택기를 사용할 수 있습니다.

다음은 :not 의사 클래스 선택기를 사용하는 예입니다:

HTML 코드:

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

CSS 코드:

.item {
  color: red;
}

li:not(.item) {
  color: blue;
}

위 예에서는 처음 세 개의 목록 항목에 "item"이라는 클래스가 있는 순서가 지정되지 않은 목록이 있습니다. ", 마지막 두 목록 항목에는 클래스 이름이 없습니다. 처음 세 개의 목록 항목에는 빨간색 텍스트 색상을 적용하고 마지막 두 목록 항목에는 파란색 텍스트 색상을 적용하려고 합니다.

:not 의사 클래스 선택기를 사용하고 클래스 이름이 ".item"인 요소를 제외하면 이 효과를 얻을 수 있습니다.

문서 전체에서 파란색 텍스트 색상은 클래스 이름이 ".item"인 요소를 제외한 모든 li 요소에 적용됩니다. 클래스 이름이 ".item"인 요소에는 빨간색 텍스트 색상이 적용됩니다.

:not 의사 클래스 선택기를 사용하면 특정 조건을 충족하지 않는 요소를 보다 유연하게 선택하고 스타일을 적용할 수 있습니다. 이는 특정 상황, 특히 특정 유형이나 조건 외부의 요소에 대해 특별한 처리를 수행해야 할 때 매우 유용할 수 있습니다.

:not 의사 클래스 선택기는 일부 이전 버전의 브라우저와 호환되지 않을 수 있다는 점에 유의해야 합니다. 따라서 사용 시 테스트 및 호환성 고려 사항이 필요합니다. 또한 선택기의 복잡성은 성능에 영향을 미칠 수 있으므로 사용할 때 주의하세요.

요약하자면, :not pseudo-class 선택자를 사용하면 특정 조건에 맞지 않는 요소를 선택하고 여기에 다양한 스타일을 적용할 수 있습니다. 구문은 간단하고 명확하며 사용하기 쉽고 어떤 경우에는 더 나은 유연성과 유용성을 제공할 수 있습니다.

위 내용은 기준을 충족하지 않는 요소에 대해 CSS 스타일을 선택하기 위해 :not pseudo-class 선택기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!