Wybierz elementy według atrybutu danych w CSS

Odpowiedzi:

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