CSS Seçici “(A veya B) ve C”?

176

Bu basit olmalı, ancak bunun için arama terimlerini bulmakta sorun yaşıyorum.
Diyelim ki bende:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

CSS'de, "(.a veya .b) ve .c" ile eşleşen bir seçiciyi nasıl oluşturabilirim?

Bunu yapabileceğimi biliyorum:

.a.c,.b.c {
  /* CSS stuff */
}

Ancak, bu tür bir mantığı çok çeşitli mantıksal kombinasyonlarla yapmak zorunda olduğumu varsayarsak, daha iyi bir sözdizimi var mı?

html css css-selectors

— alay etmek
kaynak

Internet Explorer 6'yı desteklemeniz gerekiyorsa dikkatli olun, çünkü bir CSS seçicisinde birden fazla sınıf adını yoksayar.

— fforw

24

Neyse ki, bu proje için IE6 kullanıcılarına kendilerini yükseltmelerini söyleyebilirim.

— Josh

12

Anlaşılır olması için her zaman virgüllerden sonra veya en azından bir boşlukta yeni bir satır koymaya çalışıyorum.

— ANeves

2

Yeni hat için @ANeves +1. Bu, özellikle kaynak kontrolünü kullanırken, bence en iyi değerlendirme.

— Curt

149

daha iyi bir sözdizimi var mı?

Hayır. CSS oroperatörü ( ,) gruplamaya izin vermez. Temel olarak seçicilerdeki en düşük öncelikli mantıksal operatördür, bu yüzden kullanmalısınız .a.c,.b.c.

— Matt Ball
kaynak

25

Henüz değil, ama :matches()sadece bunu yapan deneysel sözde sınıf işlevi var:

:matches(.a .b) .c {
  /* stuff goes here */
}

Burada ve burada daha fazla bilgi bulabilirsiniz . Şu anda, çoğu tarayıcı :any()aynı şekilde çalışan ancak yerini alacak ilk sürümünü desteklemektedir :matches(). Biz bunu her yerde kullanmadan önce biraz beklemek zorunda (kesinlikle olacak).

— Metalcoder
kaynak

Basitçe hiç düşünmedikleri bir şeyi uygulamadığı için IE'yi suçlamak mantıksızdır ve başlangıçta herhangi bir taslakta yoktu. :-moz-any()ve :-webkit-any()Mozilla'nın Selectors 4 için önermesinden çok önce ortaya çıktı (şu anki enkarnasyonuna yol açan :matches()).

— BoltClock

1

Taslağın ne kadar süredir sunulduğuna bakılmaksızın, herhangi bir tedarikçinin bir özelliği istikrarsız taslaktan uygulamasını beklemek aynı derecede mantıklı değildir (bu, Seçiciler 4'ün FPWD'den üç yıl sonra kararsız kalması ve büyük ölçüde uygulanmadığı gerçeğini hesaba katmaktadır) .

— BoltClock

@BoltClock, 2001'de var olmayan şeyler için on yıl boyunca IE6'yı suçluyorlardı. İnsanlar sadece birini suçlamak istiyorlar.

— GetFree

Deneysel olanlarla ilgili bir kelime, resmi olarak uygulanmadığı sürece onlara güvenmeye başlamak istememenizdir. Harika bir çözüm gibi görünse de, kişisel olarak projelerimde uygulamamı engelleyen şeyin kaybolması olasılığı. Bir deneysel sözde sınıfı takip etmek bile beni güvende hissetmiyor. Büyük olasılıkla projede birden fazla yerde kullanılacak ve durumda ve kullandığınız birden fazla yer varsa - bir şekilde hepsini takip etmeniz gerekir. Kesinlikle

— yedekler

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': ':any(.a .b)' is not a valid selector.Hata alan tek kişi ben miyim ? 🤔

— thomas

12

Eğer buna sahipseniz:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

Ve sadece .xve ( .aveya .b) sahip öğeleri seçmek istersiniz , şunları yazabilirsiniz:

.x:not(.c) { ... }

ancak bu yalnızca üç "alt sınıfınız" olduğunda ve bunlardan iki tanesini seçmek istediğinizde kullanışlıdır.

Yalnızca bir alt sınıf seçme (örneğin .a):.a.x

İki alt sınıf seçme (örneğin .ave .b):.x:not(.c)

Üç alt sınıfı da seçme: .x

— Šime Vidas
kaynak

6

Formun herhangi bir mantıklı cümlesi 'veya' ile a or b or c or daynıdır not(not(a) and not(b) and not(c) and not(d)), aslında sadece bir kolaylık fonksiyonudur. Teoride her durumda onsuz kurtulmak mümkün olmalıdır . OP davasında (.a or .b) and .c->:not(:not(.a):not(.b)).c

— Max Murphy

2

@MaxMurphy Bunu test ettiniz mi?

— Šime Vidas

4

Bu sabah saat beşten itibaren, evet! Ben birinci dereceden mantığı tüküren js var, yapraklarda seçicilerle, gibi sonuçlar veriyor :not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]. Kod kamuoyu incelemesi için yeterince temiz değil, henüz, aksi takdirde gönderirim. Chrome, safari ve düşük kaliteli bir android telefonda test ettim.

— Max Murphy

2

@MaxMurphy Harika bir noktanız var, ancak bence "kolaylık işlevi" nin oldukça işkence görmesini istediniz. Dijital bir bilgisayarın yapabileceği her şey NAND kapılarına ayrılabilir, ancak yazılım mühendisliğinin geri kalanına “bir grup kolaylık işlevi” demezdim. Yapı farklılıkları bir araya getirilebildiğinde derece farklılıkları hızla fiili farklılıklara dönüşür.

— Sarah G

1

@ MaxMurphy Şaka yaptığınızı anlamakta zorlandım. :( olumsuzluk BB sözde sınıfı: yok (X), bir alan fonksiyonel bir gösterim olan basit seçici bir bağımsız değişken olarak X O bağımsız değişken ile temsil edilir, bir elemanı ile eşleşir x.. Başka bir olumsuzluk seçici içermemelidir . (Dan Mozilla dokümanlar , vurgu mayını)

— törzsmókus

5

Hayır. Standart CSS aradığınız şeyi sağlamaz.

Ancak, daha az ve SASS içine bakmak isteyebilirsiniz .

Bunlar, değişkenler, iç içe geçmiş kurallar ve diğer geliştirmeler dahil ek özellikler ekleyerek varsayılan CSS sözdizimini genişletmeyi amaçlayan iki projedir.

Çok daha yapılandırılmış CSS kodu yazmanıza izin verir ve bunlardan biri neredeyse kesinlikle kullanım durumunuzu çözecektir.

Tabii ki, tarayıcıların hiçbiri genişletilmiş sözdizimini desteklemez (özellikle iki projenin her biri farklı sözdizimi ve özelliklere sahip olduğundan), ancak yaptıkları, daha sonra yapabileceğiniz LESS veya SASS kodunuzu standart CSS'ye dönüştüren bir "derleyici" sağlamaktır. sitenize dağıtın.

— Spudley
kaynak

Bu noktada, ben sadece PHP baskı "İçerik türü: metin / css" kullanabilirsiniz

— Josh