Wybierz elementy według atrybutu danych w CSS

488

Czy można wybrać elementy w CSS według ich atrybutów danych HTML5 (na przykład data-role)?

— Diogo Cardoso
źródło

776

Jeśli masz na myśli użycie selektora atrybutów , jasne, dlaczego nie:

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

Istnieje wiele selektorów atrybutów, których można użyć w różnych scenariuszach, z których wszystkie są opisane w dokumencie, do którego prowadzę link. Pamiętaj, że mimo że niestandardowe atrybuty danych są „nową funkcją HTML5”,

przeglądarki zazwyczaj nie mają żadnych problemów z obsługą niestandardowych atrybutów, więc powinieneś być w stanie filtrować je za pomocą selektorów atrybutów; i
nie musisz się również martwić o sprawdzanie poprawności CSS, ponieważ CSS nie dba o nazwy atrybutów bez przestrzeni nazw, o ile nie łamią one składni selektora.

— BoltClock
źródło

4

Jest kompatybilny ze wszystkimi nawigatorami?

— Christophe Debove

21

@Christophe Debove: IE7 + i wszystko inne.

— BoltClock

7

Wydaje się, że CSS nie wykrywa tego, jeśli atrybut danych jest ustawiony lub zmieniony za pomocą JS.

— 4 ʙᴀᴋᴇʀ

30

Po dalszych badaniach wydaje się, $("#element").data("field","value");że nie zmienia wartości atrybutów danych, jedynie modyfikuje wersję DOM buforowanej przez jQuery wersji. Aby zmienić rzeczywisty atrybut DOM należy użyć $("#element").attr("data-field","value");. Unieważnienie mojego oryginalnego komentarza.

— 5 ʙᴀᴋᴇʀ

2

Tak, wygląda na to, że zmiana zestawu danych również działa @Matthew - jsfiddle.net/BoltClock/k378xgj3 Dzięki za nic jQuery.

— BoltClock

107

W nowoczesnych przeglądarkach można również wybierać atrybuty niezależnie od ich zawartości

z:

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

[anything] {
   /* Styles */
}

Na przykład: http://codepen.io/jasonm23/pen/fADnu

Działa na bardzo znacznym odsetku przeglądarek.

Uwaga: można tego również użyć w selektorze JQuery lub za pomocą document.querySelector

— ocodo
źródło

Wow, nigdy nie widziałem, że można go tak wykorzystać !! +1! I FWIW, teraz, gdy wygasły przeglądarki, uważam, że działa w IE7 +, więc jego obsługa jest prawie wszechobecna. To zabawne, że nawet Chris Coyier nie wspomniał o

— Camilo Martin

Dzięki @CamiloMartin Usunąłem link do przeglądarki, aby uniknąć zamieszania / irytacji.

— ocodo

Dodano link do wątku Chrisa Coyiera css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

Żadna z tej składni i tak nie jest nowa - więcej osób było zaskoczonych, że IE6 nie obsługuje jej niż IE7 +. Można założyć, że wszystkie selektory CSS2.1 są obsługiwane w IE8 i późniejszych wersjach - IE7 robi większość, aczkolwiek z kilkoma niejasnymi błędami. Wszystkie nowoczesne przeglądarki obsługują przez pewien czas selektory poziomu 3, a zamiast tego Chrome jest błędny.

— BoltClock

1

Skoro jesteśmy przy temacie selektorów atrybutów chociaż, to warto zauważyć, że podciąg selektorów atrybutów, które zostały wprowadzone na poziomie 3 ( ^=, *=i $=) są również obsługiwane przez IE7 i IE8. Być może zostały wprowadzone w IE przed ich standaryzacją.

— BoltClock

47

Warto zauważyć selektory atrybutów podciągów CSS3

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

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

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

— Matas Vaitkevicius
źródło

13

Możesz łączyć wiele selektorów, a to jest tak fajne, wiedząc, że możesz wybrać każdy atrybut i atrybut na podstawie ich wartości, tak jak hrefna podstawie ich wartości, tylko z CSS.

Selektory atrybutów umożliwiają zabawę z dodatkowymi atrybutami idiclass

Oto niesamowita lektura na temat selektorów atrybutów

Skrzypce

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>

Rozwiń fragment kodu

Obsługa przeglądarek:
IE6 +, Chrome, Firefox i Safari

Możesz sprawdzić szczegóły tutaj .

— Aamir Shahzad
źródło

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
źródło