특정 클래스 나 속성이없는 요소를 선택하는 CSS 선택기를 작성할 수 있습니까?

644

특정 클래스 가없는 모든 요소를 ​​선택하는 CSS 선택기 규칙을 작성하고 싶습니다 . 예를 들어, 다음 HTML이 주어진 경우 :

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

나는 선택을 작성하려합니다 선택이이 경우입니다은 "인쇄"클래스가없는 모든 요소 탐색 및 요소를.

이것이 가능한가?

참고 : 이것을 사용하려는 실제 HTML에는 "printable"클래스 가없는 요소가 훨씬 많습니다 (위 예제에서 다른 방법이라는 것을 알고 있습니다).

html  css  css-selectors 
— 데이비드 노르 발
소스

답변:

897

일반적으로 다음 :not()과 같이 클래스 선택기를 의사 클래스에 추가합니다 .

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

하지만 당신은 더 나은 브라우저 지원을 필요로하는 경우 (IE8 이상 지원하지 않습니다 :not()), 당신은 요소에 대한 스타일 규칙을 만드는 떨어져 아마 더 좋을 것 같아 할 은 "인쇄"클래스가 있습니다. 실제 마크 업에 대해 말한 내용에도 불구하고 이것이 가능하지 않은 경우 해당 제한을 중심으로 마크 업을 수행해야 할 수도 있습니다.

속성에 따라 당신이이 규칙에있어 설정이, 그들 중 일부는 하나의 자손에 의해 상속 될 수 명심 있다 .printable , 또는 다른 어떤 식 으로든 그들에게 영향을줍니다. 예를 들어 display상속되지는 않지만 display: nonea :not(.printable)를 설정 하면 요소와 해당 하위 트리가 레이아웃에서 완전히 제거되므로 해당 하위 항목과 모든 하위 항목이 표시 되지 않습니다 . visibility: hidden눈에 보이는 자손을 표시 할 수있는 대신 대신 사용하여이 문제를 해결할 수 있지만 숨겨진 요소는 원래처럼 레이아웃에 영향을줍니다. 요컨대, 조심하세요.

— BoltClock
소스
4
약간의 정보만으로도 CSS의 미디어에 구애받지 않는 측면에 대한 브라우저 지원은 미디어 유형에 따라 동일합니다. 브라우저가 :not()화면을 지원하지 않으면 인쇄에서도 지원하지 않습니다.
— BoltClock
19
참고 것을 :not()소요 단지 간단한 선택 은 의미 없다 처럼 중첩 된 선택자를 포함을 :not(div .printable)- 볼 W3C 선택기 구문
— 스티브 Eynon
1
방금 .active a : not (.active a) 시도했지만 작동하지 않았습니다. 그러나, a : not (.active)는!
— user2367418
그것이 당신을 위해 작동하지 않았다고 말할 때, 당신은 아마 그것이 당신을 위해 작동하지 않았 음을 의미 합니까? 그것은 작동하지 않는다는 것을 의미하지는 않으며, 아마도 특이한 경우 :not(.active)일 수도 있습니다. 규칙 의 속성이 우선 순위가 높은 규칙의 속성으로 대체되었을 수 있습니다.
— amn
1
@Kilves : 확실합니까? 의 특이성은 :not()그 논증 의 특이성이며 , 이는 , 에 및에 대해 :not(div)동일하게 특정적임 을 의미 한다 . div:not(.cls).cls:not(#id)#id
— BoltClock
179 
:not([class])

실제로 이것은 CSS 클래스 ( class="css-selector")가 적용 되지 않은 것을 선택 합니다.

jsfiddle 데모를 만들었습니다

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>
스 니펫 확장

이것이 지원됩니까? 예 : Caniuse.com (2020 년 1 월 2 일 액세스) :

  • 지원 : 98.74 %
  • 부분 지원 : 0.1 %
  • 총 : 98.84 %

재미있는 편집, 나는 : not의 반대에 대해 인터넷 검색을하고있었습니다. CSS 부정?

selector[class]  /* the oposite of :not[]*/
— Milche Patern
소스
109

:not부정 의사 클래스

부정 CSS 의사 클래스 :not(X)는 간단한 선택자 X를 인수로 사용하는 함수 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. X에는 ​​다른 부정 선택기가 포함되어서는 안됩니다.

:not일반적인 CSS 선택기 순서대로 일치하는 요소의 하위 집합을 제외하는 데 사용할 수 있습니다 .

간단한 예 : 클래스로 제외

div:not(.class)

div클래스없이 모든 요소를 선택합니다.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
스 니펫 확장

복잡한 예 : 유형 / 계층 구조로 제외

:not(div) > div

div다른 사람의 자녀가 아닌 모든 요소를 선택합니다div

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
스 니펫 확장

복잡한 예 : 체인 의사 선택기

:not셀렉터 및 의사 요소 를 체인 / 네스트 할 수 없다는 점을 제외 하고 다른 의사 셀렉터와 함께 사용할 수 있습니다.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
스 니펫 확장

브라우저 지원 등

:notA는 CSS3 레벨 선택기는 ,지지면에서의 주요 예외는 점이다 IE9 +

사양은 또한 흥미로운 지적을합니다.

:not()의사는 쓸모 선택기가 기록 될 수 있습니다. 예를 들어 :not(*|*)전혀없는 원소를 나타내고, 또는, foo:not(bar)동등하다 foo하지만 높은 특이성.

— SW4
소스
3
저녁 식사는 잘 문서화되고 잘 설명 된 답변이었습니다! #thumbsup
— 조나단 브레도 크리스텐슨
좋아, 당신의 모범 :not(div) > div은 직접적인 부모와 만 일할 것입니다. 다른 할아버지는 어떻습니까?
— FindOut_Quran
멋진 정보! 내가 필요한 것! 감사!
— Jamie
9

위의 : not () 답변은 효과를 만들거나 뷰 / DOM을 조정하는 대신 각도 형식에서 매우 효과적 일 수 있습니다. 

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

페이지를로드 할 때 입력 필드에 데이터가 추가되었지만 더 이상 깨끗하지 않은 경우에만 유효하지 않은 (빨간색 테두리 또는 배경 등) 표시됩니다.

— 베인 스타 007
소스
7

예

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

// 불투명도 0.6 모두 "section-"은 아니지만 "section-name"

— 하칸
소스
2

:not(.class)앞에서 언급 한대로 선택기를 사용할 수 있습니다 .

인터넷 익스플로러 호환성에 관심이 있다면 http://selectivizr.com/ 을 사용하는 것이 좋습니다 .

그러나 아파치에서 실행해야 효과가 표시되지 않습니다.

— 멜코르
소스
3
아파치에서 실행한다는 것은 무엇을 의미합니까? Selectivizr는 프론트 엔드 라이브러리이며 서버 소프트웨어와는 아무런 관련이 없습니다.
— Kloar
http 서버 없이는 작동하지 않는 아약스 요청을 수행합니다.
— MelkorNemesis
2

:not()의사 클래스 사용

특정 요소를 제외한 모든 요소를 ​​선택합니다. :not() CSS 의사 클래스를 사용할 수 있습니다 . :not()의사 클래스는 필요 CSS인수로 선택합니다. 선택기는 인수로 지정된 요소를 제외한 모든 요소에 스타일을 적용합니다.

예 :

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
스 니펫 확장

우리는 이미이 의사 클래스의 힘을 볼 수 있으며 특정 요소를 배제하여 선택기를 편리하게 미세 조정할 수 있습니다. 또한이 의사 클래스 는 선택기의 특이성을 높 입니다. 예를 들면 다음과 같습니다.

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
스 니펫 확장

— 빌렘 반 데르 빈
소스
0

클래스 로그인이 누락 된 경우 특정 클래스 메뉴 에 특정 CSS가 포함되도록하려면 다음을 수행하십시오.

body:not(.logged-in) .menu  {
    display: none
}
— 미하이
소스
-1

다른 사람들이 말했듯이 간단히 : not (.class)를 넣습니다. CSS 선택 자의 경우이 링크를 방문하는 것이 좋습니다. https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

부정 의사 클래스가 특히 유용합니다. 컨테이너 ID가있는 것을 제외하고 모든 div를 선택하고 싶다고 가정 해 봅시다. 위의 스 니펫은 해당 작업을 완벽하게 처리합니다.

또는 단락 태그를 제외한 모든 단일 요소 (권장되지 않음)를 선택하려면 다음을 수행하십시오.

*:not(p) {
  color: green;
}
— HBhering
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.