CSS'de öğeleri veri özelliğine göre seçme

488

CSS'deki öğeleri HTML5 veri özelliklerine (örneğin data-role) göre seçmek mümkün müdür ?

— Diogo Cardoso
kaynak

776

Bir öznitelik seçici kullanmak istiyorsanız , neden olmasın:

[data-role="page"] {
    /* Styles */
}

Bağlandığım belgede ele alınan çeşitli senaryolar için kullanabileceğiniz çeşitli özellik seçicileri vardır. Özel veri özelliklerinin "yeni bir HTML5 özelliği" olmasına rağmen,

tarayıcılarda genellikle standart olmayan özellikleri destekleyen herhangi bir sorun yoktur, bu nedenle bunları özellik seçicilerle filtreleyebilmeniz gerekir; ve
CSS, seçici sözdizimini bozmadıkları sürece, ad boşluklu olmayan öznitelik adlarını önemsemediği için CSS doğrulaması konusunda da endişelenmenize gerek yoktur.

— BoltClock
kaynak

4

Tüm navigasyon cihazlarıyla uyumlu mu?

— Christophe Debove

21

@Christophe Debove: IE7 + ve diğer her şey.

— BoltClock

7

Veri özniteliği JS aracılığıyla ayarlanırsa veya değiştirilirse CSS bunu algılamaz.

— ʙᴀᴋᴇʀ ʙᴀᴋᴇʀ

30

Daha fazla araştırmadan sonra $("#element").data("field","value");veri öznitelikleri değerini değiştirmez, yalnızca jQuery'nin DOM'un önbelleğe alınmış sürümünü değiştirir. Gerçek DOM özelliğini değiştirmek için kişinin kullanılması gerekir $("#element").attr("data-field","value");. Orijinal yorumumu geçersiz yapıyorum.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2

Evet, veri kümesini değiştirmek de işe yarıyor @Matthew - jsfiddle.net/BoltClock/k378xgj3 Hiçbir şey için teşekkürler jQuery.

— BoltClock

107

Modern tarayıcılarda, içeriklerinden bağımsız olarak özellikleri seçmek de mümkündür

ile:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Örneğin: http://codepen.io/jasonm23/pen/fADnu

Tarayıcıların çok önemli bir yüzdesi üzerinde çalışır.

Bunun bir JQuery seçicide veya document.querySelector

— ocodo
kaynak

Vay canına, bu şekilde kullanılabileceğini hiç görmedim !! 1! Ve FWIW, şimdi tarayıcı görüntülerinin süresi dolduğuna göre, IE7 + 'da çalıştığına inanıyorum, bu yüzden desteği hemen hemen her yerde mevcut. Chris Coyier'in bile burada

— Camilo Martin

Teşekkürler @ CamloMartin Karışıklık / sıkıntıdan kaçınmak için tarayıcılar bağlantısını kaldırdım.

— ocodo

Chris Coyier adlı kullanıcının parçasına bir link eklendi css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

Bu sözdiziminin hiçbiri zaten yeni değil - IE6'nın IE7 + 'dan daha fazla desteklemediğine daha fazla insan şaşırdı. Hemen hemen tüm CSS2.1 seçicilerinin IE8 ve sonrasında desteklendiğini varsayabilirsiniz - IE7, birkaç belirsiz hata olsa da en iyisini yapar. Tüm modern tarayıcılar bir süreliğine seviye 3 seçicileri destekledi , Chrome bunun yerine buggy.

— BoltClock

1

Biz gerçi öznitelik seçicileri konuda konum olduğundan, 3. seviyede tanıtıldı (edildi substring öznitelik seçicisi olduğunu nota ilginç ^=, *=ve $=) ayrıca IE7 ve IE8 tarafından desteklenmektedir. Belki standartlaştırılmadan önce IE'de tanıtıldı.

— BoltClock

47

CSS3 alt dize özellik seçicilerini belirtmeye değer

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Matas Vaitkevicius
kaynak

13

Birden fazla seçiciyi birleştirebilirsiniz ve bu, her niteliği ve niteliği href, değerlerine dayalı olarak yalnızca CSS ile seçebildiğinizi bilerek çok havalı .

Nitelik seçiciler, bazı ekstralar idve classniteliklerle oynamanıza izin verir

İşte Özellik Seçiciler hakkında harika bir okuma

Vaktini boşa harcamak

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Snippet'i genişlet

Tarayıcı desteği:
IE6 +, Chrome, Firefox ve Safari

Ayrıntıları buradan kontrol edebilirsiniz .

— Aamir Shahzad
kaynak

4

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

— Naved Khan
kaynak