Belirli bir sınıf veya özniteliğe sahip OLMAYAN öğeleri seçerek bir CSS seçici yazabilir miyim?

644

Belirli bir sınıfı olmayan tüm öğeleri seçen bir CSS seçici kural yazmak istiyorum . Örneğin, aşağıdaki HTML verildiğinde:

<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>

Bu durumda, nav ve bir öğe olan "yazdırılabilir" sınıfına sahip olmayan tüm öğeleri seçen bir seçici yazmak istiyorum .

Mümkün mü?

NOT: Ben bu kullanmak istiyorum fiili HTML, çok daha fazla unsurlar var olacak yok do daha "yazdırılabilir" sınıfını (Ben yukarıdaki örnekte tersi farkında) vardır.

html css css-selectors

— David Nordvall
kaynak

898

Genellikle :not()sözde sınıfa şöyle bir sınıf seçici eklersiniz :

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

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

Eğer daha iyi bir tarayıcı desteğine ihtiyaç Ama eğer (IE8 ve desteklemeyen eski :not()) kullanarak, öğeler için stil kuralları oluşturma muhtemelen daha çok işinize yapmak "yazdırılabilir" sınıf var. Gerçek işaretlemeniz hakkında söylediklerinize rağmen bu bile mümkün değilse, işaretlemenizi bu sınırlama etrafında çalışmanız gerekebilir.

Özelliklerine bağlı olarak bu kurala konum ayarı, bazıları ya torunları tarafından miras edilebilir, unutmayın olan .printable veya başka bir şekilde ya da bu şekilde onları etkiler. Her ne kadar Örneğin, displaymiras değil, ayar display: nonebir üzerinde:not(.printable) öğenin , öğeyi ve alt ağacını mizanpajdan tamamen çıkardığı için tüm alt öğelerinin görüntülenmesini engeller. Bunu genellikle visibility: hiddengörünür torunların gösterilmesine izin verecek yerine kullanarak çözebilirsiniz , ancak gizli öğeler yine de başlangıçta yaptıkları gibi düzeni etkiler. Kısacası, dikkatli olun.

— BoltClock
kaynak

4

Biraz bilgi olarak, CSS'nin medyadan bağımsız yönleri için tarayıcı desteği genellikle medya türleri arasında aynıdır - bir tarayıcı :not()ekranda desteklemiyorsa, basılı olarak da desteklemez.

— BoltClock

19

Not olduğu :not()bir aldığı tek basit seçici anlama olamaz gibi iç içe seçicileri içerirler :not(div .printable)- bkz W3C Seçici sözdizimi

— Steve Eynon

1

Sadece .active a için denedim: değil (.active a) benim için çalışmadı. Ancak, a: hayır (.active) yaptı!

— user2367418

Eğer bu sizin için iş yoktu derken, muhtemelen iş yoktu demek sizin için doğru? Bu işe yaramadığı anlamına gelmez, muhtemelen bir özgüllüktür - :not(.active)kuralınızdaki özellikler, kural (lar) da daha yüksek önceliğe sahip özellikler tarafından geçersiz kılınmış olabilir.

— amn

1

@Kilves: Bundan emin misin? Özgüllüğü :not()olan yöntemler, bağımsız değişken, bu :not(div)aynı şekilde özeldir div, :not(.cls)için .clsve :not(#id)için #id.

— BoltClock

179

:not([class])

Aslında bu, css sınıfı ( class="css-selector") uygulanmamış herhangi bir şeyi seçer .

Bir jsfiddle demosu yaptım

    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>

Snippet'i genişlet

Bu destekleniyor mu? Evet: Caniuse.com (erişim tarihi 02 Oca 2020) :

Destek: 98.74%
Kısmi destek:% 0,1
Toplam: 98,84%

Komik düzenleme, ben tam tersi için Googling oldu: değil. CSS olumsuzlaması mı?

selector[class]  /* the oposite of :not[]*/

— Milche Patern
kaynak

109

`:not`Olumsuzluk sözde sınıfı

Negatif CSS sözde sınıfı, :not(X)basit bir X seçicisini argüman olarak alan işlevsel bir gösterimdir. Bağımsız değişken tarafından temsil edilmeyen bir öğeyle eşleşir. X başka bir olumsuzlama seçici içermemelidir.

:notNormal CSS seçicilerinde olduğu gibi sıralanan eşleşen öğelerin alt kümelerini hariç tutmak için kullanabilirsiniz .

Basit örnek: sınıfa göre hariç tutma

div:not(.class)

Sınıfsız tüm divöğeleri seçer.class

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

<div>Make me red!</div>
<div class="class">...but not me...</div>

Snippet'i genişlet

Karmaşık örnek: türe / hiyerarşiye göre hariç

:not(div) > div

divBaşka bir çocuğun çocuğu olmayan tüm unsurları seçerdiv

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

Snippet'i genişlet

Karmaşık örnek: zincirleme sözde seçici

:notSeçicileri ve sözde unsurları zincirleyememe / iç içe geçirememe dışında, diğer sözde seçicilerle birlikte kullanabilirsiniz.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

Snippet'i genişlet

Tarayıcı Desteği vb.

:notbir CSS3 seviye seçici , destek açısından ana istisna ise IE9 +

Spesifikasyon ayrıca ilginç bir noktaya işaret ediyor:

:not()Sözde yararsız seçiciler yazılmasına izin verir. Örneğin :not(*|*), hiçbir elemanı temsil etmeyen veya daha yüksek bir özgüllükle foo:not(bar)eşdeğer olan foo.

— SW4
kaynak

3

Bu akşam yemeği iyi belgelenmiş ve iyi örneklenmiş bir cevaptı! #thumbsup

— Jonathan

Tamam, örneğin :not(div) > divsadece doğrudan ebeveynlerle çalışacak. Diğer büyükbabalara ne olacak?

— FindOut_Quran

Harika bilgi! Tam ihtiyacım olan şey! Teşekkürler!

— Jamie

22

Bunun işe yarayacağını düşünüyorum:

:not(.printable)

Gönderen "negatif css seçici" cevabını .

— Eregrith
kaynak

9

Yukarıdaki yanıtlara katkıda bulunmak gibi: not () efekt oluşturmak veya görünümü / DOM'u ayarlamak yerine açısal formlarda çok etkili olabilir,

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

Sayfanızı yüklerken giriş alanlarının yalnızca geçersiz (kırmızı kenarlıklar veya arka planlar vb.) Eklenmiş (yani artık bozulmamış), ancak geçersiz olduklarını göstermesini sağlar.

— BaneStar007
kaynak

7

Misal

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

// Opaklık 0.6 tümü "bölüm-" değil, "bölüm adı" değil

— Hakan
kaynak

2

:not(.class)Seçiciyi daha önce belirtildiği gibi kullanabilirsiniz .

Internet explorer uyumluluğuna önem veriyorsanız, http://selectivizr.com/ .

Ancak bunu apache altında çalıştırmayı unutmayın, aksi takdirde efekti görmezsiniz.

— MelkorNemesis
kaynak

3

Apache altında çalıştırmak ne demek? Selectivizr bir ön uç lib, sunucu yazılımı ile ilgisi yoktur

— Kloar

Http sunucusu olmadan çalışmayan ajax isteği gerçekleştirir.

— MelkorNemesis

2

Kullanmak `:not()`Yalancı sınıfı :

Belirli bir eleman (veya elemanlar) hariç her şeyi seçmek için. :not() CSS sözde sınıfını kullanabiliriz . :not()Sözde sınıfı gerektirenCSS bağımsız değişken olarak seçici. Seçici, stilleri bağımsız değişken olarak belirtilen öğeler dışındaki tüm öğelere uygular.

Örnekler:

/* 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>

Snippet'i genişlet

Bu sözde sınıfın gücünü zaten görebiliyoruz, belirli unsurları hariç tutarak seçicilerimize ince ayar yapmamızı sağlıyor. Ayrıca, bu sözde sınıf seçicinin özgüllüğünü arttırır . Örneğin:

/* 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>

Snippet'i genişlet

— Willem van der Veen
kaynak

0

Belirli bir sınıf isterseniz menü eksik sınıf eğer belirli bir CSS olması açmış :

body:not(.logged-in) .menu  {
    display: none
}

— Mihai
kaynak

-1

Diğerlerinin söylediği gibi, basitçe şunu söylersiniz: (.class). CSS seçicileri için bu bağlantıyı ziyaret etmenizi öneririm, yolculuğum boyunca çok yardımcı oldu: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

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

Olumsuzluk sözde sınıfı özellikle yararlıdır. Diyelim ki kapsayıcı kimliği olan tüm div'ları seçmek istiyorum. Yukarıdaki pasaj bu görevi mükemmel bir şekilde yerine getirecektir.

Veya, paragraf etiketleri hariç her bir öğeyi (önerilmez) seçmek istersem, yapabiliriz:

*:not(p) {
  color: green;
}

— HBhering
kaynak

Belirli bir sınıf veya özniteliğe sahip OLMAYAN öğeleri seçerek bir CSS seçici yazabilir miyim?

:notOlumsuzluk sözde sınıfı

Basit örnek: sınıfa göre hariç tutma

Karmaşık örnek: türe / hiyerarşiye göre hariç

Karmaşık örnek: zincirleme sözde seçici

Tarayıcı Desteği vb.

Kullanmak :not()Yalancı sınıfı :

Örnekler:

`:not`Olumsuzluk sözde sınıfı

Kullanmak `:not()`Yalancı sınıfı :