선택기가 아닌 CSS가 작동하는 방법에 대한 완벽한 안내서

CSS에서는 특정 클래스가 있는 경우와 같은 특정 상황이 아닌 요소를 선택하려는 게시물에 서명해야 하는 경우가 많습니다. 이러한 경우 :not() 선택기를 사용하여 이를 수행할 수 있습니다. 어떻게 작동하는지 살펴보겠습니다.

셀렉터가 아닌 CSS

CSS:not() 선택기는 대부분의 브라우저에서 광범위하게 지원됩니다. 그것이 작동하는 방식은 우리가 선택자를 생성한 다음 그것이 되어서는 안 되는 것을 지정하는 것입니다. 예를 들어 다음 HTML이 있다고 가정합니다.

<div class="not-red">Not Red</div>
<div class="not-red">Not Red</div>
<div>Red</div>
<div>Red</div>

여기에는 div 가 많이 있으며 일부는 빨간색이 아니어야 합니다. 일반적으로 div 요소를 제외하고 페이지의 모든 .not-red 요소를 빨간색으로 표시하려면 :not(.not-red)를 사용하여 빨간색이 아닌 그대로 유지되도록 할 수 있습니다.

div:not(.not-red) {
    color: red;
}

여기 또 다른 예가 있습니다. 기본적으로 .old-fashioned 요소를 제외한 모든 요소에는 Arial 글꼴이 있습니다.

<div class="old-fashioned">Old Fashioned Text</div>
<div>Some Text</div>

비.old-fashioned 요소만 Arial 글꼴을 사용하는 CSS는 다음과 같습니다.

div:not(.old-fashioned) {
    font-family: Arial, sans-serif;
}

선택자가 아닌 CSS는 특이성을 높입니다.

특정 선택자가 다른 선택자를 "재정의"하는 CSS의 특이성 개념에 익숙할 것입니다. 예를 들어 class는 id보다 특이성이 낮으므로 id CSS 속성은 동일한 요소의 class 속성을 재정의합니다.
:not 선택자도 특이성에 영향을 미칩니다. 예를 들어 코드에 div:not(#id)가 있는 경우 여전히 id가 있는 것으로 간주되므로 특이성이 id가 있는 것처럼 증가합니다. :not()를 사용할 때 기억해두면 유용합니다.

선택자가 아닌 CSS 및 DOM 구조

:not() 에 대한 한 가지 혼란스러운 점은 요소 내 항목에 적용되는 스타일을 중지하기 위해 이를 사용하려고 할 때입니다. 예를 들어 다음 HTML이 있다고 가정합니다.

<div class="container">
    <form>
        <div class="input-element">
            <input type="text" />
        </div>
    </form>
    <div class="input-element">
        <input type="text" />
    </div>
</div>

input 요소 내에 있지 않은 form 요소에만 스타일을 적용하려고 한다고 가정해 보겠습니다. 간단하죠? 다음과 같이 시도해 볼 수 있습니다.

div :not(form) input {
    border: 2px solid red;
}

이 방법만 작동하지 않으며 그 이유는 :not()가 모든 수준에 적용되고 각 입력을 .input-element로 래핑하기 때문입니다. 즉, :not(form) 가 .input-element 에 적용되며 실제로는 형식이 아닙니다. 따라서 두 요소input 모두 빨간색 테두리를 갖게 됩니다. 이를 방지하려면 래퍼 요소를 제거하고 입력이 다음 형식의 직계 자식이 되도록 해야 합니다.

<div class="container">
    <form>
        <input type="text" />
    </form>
    <input type="text" />
</div>

그렇게 하면 양식의 입력이 div :not(form) input 에서 스타일을 상속받지 않습니다.

선택기 지원이 아닌 CSS

:not() 선택기에는 두 가지 버전이 있다는 점에 유의하는 것이 중요합니다. 하나는 간단한 단일 CSS 선택기만 허용하고, :not()에 대한 최신 업데이트는 모든 CSS 선택기를 허용합니다.

모든 브라우저는 Internet Explorer를 포함하여 지금까지 사용한 것과 같은 단순한 단일:not() 선택기를 지원합니다. 그러나 모든 브라우저가 복합 선택기를 지원하는 것은 아닙니다. :not 의 간단한 선택기를 사용하여 다음을 모두 수행할 수 있습니다.

:not(#id)

:not(.class)

:not(element)

:not([attrbute])

그러나 다음과 같은 것은 복잡한 선택자에서만 사용할 수 있습니다.

:not(#id, .class, [attribute])

:not(#id.class)

:not(element#id, #id.class)

다행스럽게도 복잡한 선택자에 대한 지원은 여전히 ​​상당히 높습니다. 오늘날 복잡한 선택기를 지원하지 않는 유일한 브라우저는 Internet Explorer와 일부 모바일 브라우저입니다. You can see the full support for the :not selector here .