Czy mogę napisać selektor CSS, wybierając elementy NIE mające określonej klasy lub atrybutu?

644

Chciałbym napisać regułę wyboru CSS, która wybiera wszystkie elementy, które nie mają określonej klasy. Na przykład biorąc pod uwagę następujący kod 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>

Chciałbym napisać selektor że wybiera wszystkie elementy, które nie mają „druku” klasy, które w tym przypadku są takie nav i A elementy.

czy to możliwe?

UWAGA: w rzeczywistym HTML, w którym chciałbym tego użyć, będzie o wiele więcej elementów, które nie mają klasy „do wydrukowania” niż w (zdaję sobie sprawę, że jest odwrotnie w powyższym przykładzie).

html css css-selectors David Nordvall
źródło

Odpowiedzi:

897

Zazwyczaj dodajesz selektor klasy do :not()pseudoklasy w taki sposób:

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

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

Ale jeśli potrzebujesz lepszej obsługi przeglądarki (IE8 i starsze nie obsługują :not()), prawdopodobnie lepiej jest stworzyć reguły stylu dla elementów, które mają klasę „do wydruku”. Jeśli nawet to nie jest możliwe pomimo tego, co mówisz o swoim znaczniku, być może będziesz musiał przepracować swój znacznik wokół tego ograniczenia.

Należy pamiętać, że w zależności od właściwości ustawianych w tej regule, niektóre z nich mogą być dziedziczone przez potomków, którzy są .printable , lub w inny sposób wpływają na nich w ten czy inny sposób. Na przykład, chociaż displaynie jest dziedziczony, ustawienie display: nonena a :not(.printable)uniemożliwi wyświetlanie i jego potomków, ponieważ całkowicie usuwa element i poddrzewo z układu. Często można to obejść, używając visibility: hiddenzamiast tego, co pozwoli pokazać widocznych potomków, ale ukryte elementy będą nadal wpływać na układ, tak jak pierwotnie. Krótko mówiąc, bądź ostrożny.

BoltClock
źródło
4
Jako mały samorodek informacji, obsługa przeglądarek w CSS-ach niezależnie od mediów jest często taka sama dla różnych typów mediów - jeśli przeglądarka nie obsługuje :not()na ekranie, nie będzie też obsługiwać jej w wersji drukowanej.
BoltClock
19
Zauważ, że :not()wymaga tylko prostego selektora, co oznacza, że nie może zawierać zagnieżdżonych selektorów, takich jak :not(div .printable)- patrz składnia selektora W3C
Steve Eynon
1
Właśnie próbowałem go dla .active a: not (.active a) nie działało dla mnie. Ale: nie (.aktywne) tak!
user2367418,
Kiedy mówisz, że to nie działało dla ciebie, prawdopodobnie masz na myśli, że to nie działało dla ciebie , prawda? Nie oznacza to, że nie działa, prawdopodobnie jest to przypadek specyficzności - właściwości w :not(.active)regule mogły zostać po prostu zastąpione właściwościami w regułach o wyższym priorytecie.
am
1
@Kilves: Jesteś tego pewien? Specyfika :not()jest jej argumentu, czyli :not(div)jest równie specyficzne div, :not(.cls)aby .clsi :not(#id)do #id.
BoltClock
179 
:not([class])

W rzeczywistości spowoduje to zaznaczenie wszystkiego, co nie ma przypisanej klasy css ( class="css-selector").

Zrobiłem jsfiddle demo

    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>
Rozwiń fragment kodu

Czy to jest obsługiwane? Tak: Caniuse.com (dostęp 02 stycznia 2020) :

  • Wsparcie: 98,74%
  • Częściowe wsparcie: 0,1%
  • Razem: 98,84%

Zabawna edycja, byłem googlingiem w przeciwieństwie do: nie. Negacja CSS?

selector[class]  /* the oposite of :not[]*/
Milche Patern
źródło
109

:notKlasa negacja pseudo

Pseudoklasa negacji CSS :not(X), jest notacją funkcjonalną przyjmującą jako argument prosty selektor X. Pasuje do elementu, który nie jest reprezentowany przez argument. X nie może zawierać innego selektora negacji.

Możesz użyć, :notaby wykluczyć dowolny podzbiór dopasowanych elementów, uporządkowanych tak jak normalne selektory CSS.

Prosty przykład: wykluczenie według klasy

div:not(.class)

Wybrałby wszystkie divelementy bez klasy.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Rozwiń fragment kodu

Złożony przykład: wykluczenie według typu / hierarchii

:not(div) > div

Wybierałby wszystkie divelementy, które nie są dziećmi innegodiv

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
Rozwiń fragment kodu

Złożony przykład: łączenie pseudo selektorów

Z godnym uwagi wyjątkiem :not, że nie można łączyć / zagnieżdżać selektorów i pseudoelementów, możesz używać ich w połączeniu z innymi pseudo selektorami.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
Rozwiń fragment kodu

Obsługa przeglądarki itp.

:notjest selektorem poziomu CSS3 , głównym wyjątkiem w zakresie wsparcia jest to, że jest to IE9 +

Specyfikacja zawiera również interesujący punkt:

:not()pseudo pozwala bezużytecznych selektorów być napisane. Na przykład :not(*|*), który nie reprezentuje żadnego elementu, lub foo:not(bar)który jest równoważny, fooale o większej specyficzności.

SW4
źródło
3
To była kolacja dobrze udokumentowana i dobrze sprawdzona odpowiedź! #thumbsup
Jonathan Bredo Christensen
Ok, twój przykład :not(div) > divdziałałby tylko z bezpośrednimi rodzicami. A co z innymi dziadkami?
FindOut_Quran
Niesamowite informacje! Dokładnie to, czego potrzebowałem! Dzięki!
Jamie
9

Podobnie, aby przyczynić się do tego, że powyższe odpowiedzi: not () mogą być bardzo skuteczne w formach kątowych, zamiast tworzyć efekty lub dostosowywać widok / DOM, 

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

Zapewnia, że ​​podczas wczytywania strony w polach wejściowych będą widoczne nieprawidłowe (czerwone obramowania lub tła itp.) Tylko wtedy, gdy zostaną dodane dane (tj. Nie będą już nieskazitelne), ale będą nieprawidłowe.

BaneStar007
źródło
7

Przykład

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

// Krycie 0.6 wszystkie „sekcja-”, ale nie „nazwa-sekcji”

Hakan
źródło
2

Możesz użyć :not(.class)selektora, jak wspomniano wcześniej.

Jeśli zależy Ci na kompatybilności przeglądarki Internet Explorer, zalecamy skorzystanie z http://selectivizr.com/ .

Pamiętaj jednak, aby uruchomić go pod Apache, inaczej nie zobaczysz efektu.

MelkorNemesis
źródło
3
Co masz na myśli uruchomić pod apache? Selectivizr jest biblioteką
frontendową
Wykonuje żądanie ajax - to nie działa bez serwera HTTP.
MelkorNemesis
2

Za pomocą :not()pseudoklasy:

Do wybierania wszystkiego oprócz określonego elementu (lub elementów). Możemy użyć :not() pseudoklasy CSS . :not()Klasa pseudo wymagaCSS selektora jako argument. Selektor zastosuje style do wszystkich elementów z wyjątkiem elementów określonych jako argument.

Przykłady:

/* 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>
Rozwiń fragment kodu

Widzimy już moc tej pseudoklasy, pozwala nam to dogodnie dostroić nasze selektory, wykluczając pewne elementy. Ponadto ta pseudoklasa zwiększa specyficzność selektora . Na przykład:

/* 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>
Rozwiń fragment kodu

Willem van der Veen
źródło
0

Jeśli chcesz, aby menu konkretnej klasy zawierało określony CSS, jeśli zalogowana klasa zaginęła :

body:not(.logged-in) .menu  {
    display: none
}
Mihai
źródło
-1

Jak powiedzieli inni, po prostu dodajesz: nie (.klasa). W przypadku selektorów CSS polecam odwiedzenie tego linku, było to bardzo pomocne podczas mojej podróży: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

Pseudoklasa negacji jest szczególnie pomocna. Powiedzmy, że chcę wybrać wszystkie div, z wyjątkiem tej, która ma identyfikator kontenera. Powyższy fragment doskonale poradzi sobie z tym zadaniem.

Lub jeśli chciałbym wybrać każdy pojedynczy element (nie zalecane) oprócz tagów akapitowych, moglibyśmy zrobić:

*:not(p) {
  color: green;
}
HBhering
źródło