Sınıf önekine göre bir CSS seçici var mı?

175

Sınıflardan biri belirtilen önekle eşleşen herhangi bir öğeye bir CSS kuralı uygulamak istiyorum.

Örneğin, status-(A ve C, ancak aşağıdaki snippet'te B değil) ile başlayan sınıfı olan div için geçerli olacak bir kural istiyorum :

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Bir çeşit kombinasyon:
div[class|=status]vediv[class~=status-]

CSS 2.1 altında yapılabilir mi? Herhangi bir CSS spesifikasyonu altında yapılabilir mi?

Not: Bunu taklit etmek için jQuery kullanabileceğimi biliyorum.

css css-selectors

— THX 1138
kaynak

373

CSS2.1 ile yapılamaz, ancak CSS3 özniteliği alt dize ile eşleşen seçicilerle ( IE7 + ' da desteklenir) mümkündür:

div[class^="status-"], div[class*=" status-"]

İkinci nitelik seçicideki boşluk karakterine dikkat edin. Bu div, classniteliği aşağıdaki koşullardan birini karşılayan öğeleri alır :

[class^="status-"] - "status-" ile başlar
[class*=" status-"]- bir boşluk karakterinden hemen sonra oluşan "status-" alt dizesini içerir. Sınıf adları, her HTML spesifikasyonu için boşlukla ayrılır , bu nedenle önemli boşluk karakteri olur. Birden sınıflar belirtilmiş, eğer ilk sonra bu çekleri başka sınıflar ve durumda öznitelik değerini birinci sınıf denetleme bonus ekler uzay-yastıklı (çıkış bazı uygulamalarla gerçekleşebilir olduğu classdinamik nitelikleri).

Doğal olarak, bu da burada gösterildiği gibi jQuery'de çalışır .

İki öznitelik seçiciyi yukarıda açıklandığı gibi birleştirmeniz gerekmesinin nedeni [class*="status-"], istenmeyen bir öznitelik seçicinin aşağıdaki öğeyle eşleşeceğidir, bu istenmeyen bir durumdur:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

Böyle bir senaryonun asla gerçekleşmeyeceğinden emin olabilirseniz, basitlik adına böyle bir seçici kullanmakta özgürsünüz. Bununla birlikte, yukarıdaki kombinasyon çok daha sağlamdır.

HTML kaynağı veya işaretleme oluşturan uygulama üzerinde kontrolünüz varsa , Gumbo'nun önerdiği gibistatus- öneki sadece kendi statussınıfı yapmak daha basit olabilir .

— BoltClock
kaynak

1

Garip bir nedenden ötürü bir sınıfınız status-varsa ve bunu eşleştirmek istemiyorsanız, seçici daha da karmaşık hale gelir: div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)Ayrıca IE7 / IE8 desteğini kaybedersiniz. Neyse ki, işaretlemeniz aklı başındaysa, böyle bir sınıfı dışlamanız gerekmez.

— BoltClock

Bunda yanlış olan ne [class*=" anim-overlay-"] a:hover:after{...}? CSS derslerim anim-overlay-1, anim-overlay-2.....anim-overlay-8

— MB Parvez Rony

2

@WebDevRon: ^ = bölümünü unuttunuz. Sınıf özelliğinizin anim-overlay ile başlaması garanti edilirse, muhtemelen * = bölümüne ihtiyacınız yoktur.

— BoltClock

Teşekkür ederim. Başka bir şey, bunu kullanabilir miyim .anim-overlay-*{...}?

— MB Parvez Rony

2

@Daniel Compton: Düzenleme için teşekkürler. Bunun gibi kelimelerin, bir şeylerin bu kadar açık olmayabileceği birine nasıl küçümseyebileceğinin farkına varıldım. Bazı insanların bu tür bir değişikliği gerçekten takdir etmediklerini biliyorum, bu yüzden çoğunlukla benim yaptığımı bildirmek için yanıt veriyorum.

— BoltClock

14

CSS Öznitelik seçicileri, bir dizenin özelliklerini kontrol etmenizi sağlar. (bu durumda - bir sınıf adı)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(2.1 ve 3 için aslında 'öneri' durumunda gibi görünüyor)

İşte * nasıl çalıştığını düşünüyorum.

[ ]: Karmaşık seçiciler için konteyner ...
class: 'class' bu durumda baktığınız özelliktir .
* : değiştirici (varsa): bu durumda - "joker karakter" HERHANGİ bir eşleşme aradığınızı gösterir.
test- : "test-" dizesini içeren (herhangi bir şey olabilir) özelliğin değeri (biri olduğunu varsayarak)

Yani mesela:

[class*='test-'] {
  color: red;
}

Öğenizle birlikte iyi bir nedeniniz varsa daha spesifik olabilirsiniz

ul[class*='test-'] > li { ... }

Kenar vakaları bulmaya çalıştım, ama bir kombinasyon kullanmaya gerek yok ^ve ** her şeyi alır gibi ...

örnek: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

IE6'nın üzerindeki her şey mutlu bir şekilde itaat edecektir. :)

Bunu not et:

[class] { ... }

Sınıflı bir şey seçecek ...

— sheriffderek
kaynak

[class*='test-']gibi öğelerle eşleşecektir <div class='foo-test-bar'>. Cevabımda açıklandığı gibi ^ ve * birleştirmeyi gerektiren tek kenarlı durum bu. IE6, özellik seçicileri desteklemez.

— BoltClock

@BoltClock - açıkladığınız için teşekkürler! - <EI9'u desteklemiyorum - ve asla birbirlerine basacak hiçbir ders yazmam - bu yüzden benim için çalışıyor. :)

— sheriffderek

6

Bu CSS seçicileriyle mümkün değildir. Ancak bir yerine iki sınıf kullanabilirsiniz; örneğin, durum önemli yerine durum ve önemli .

— Bamya
kaynak

14

İyi, kendi sınıfında ayrılarak hakkında fikir, ama o olduğu CSS seçicileri ile mümkün. Cevabımı gör.

— BoltClock

2

Bunu hayır yapamazsın. A işaretine kadar tam veya kısmi olarak eşleşen bir özellik seçici vardır, ancak birden fazla özelliğiniz olduğu için burada çalışmaz. Aradığınız sınıf adı her zaman birinci olursa, bunu yapabilirsiniz:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

Bunun hangi CSS özellik seçicisine en yakın olduğunu belirtmek için olduğunu unutmayın, javascript bu özelliği değiştirebileceğinden sınıf adlarının her zaman önde olacağını varsaymanız önerilmez.

— SBUJOLD
kaynak

2

evet, bunu düşündüm. Ön tarafa bir sınıf ekleyebileceğinden, jQuery resme girdiğinde sorun olabilir.

— THX-1138

Evet, açıkça belirtmek için yazımı düzenleyeceğim, bunu yapmanın önerilen bir yolu değil. Sınıf isimleri üzerinde kontrolünüz varsa, o zaman Gumbo'nun önerisi kesinlikle gitmek için bir yol olacaktır (artı eski IE tarayıcılarında özellik seçiciler desteklenmez).

— SBUJOLD