Wählen Sie Elemente nach Datenattribut in CSS aus

Antworten:

776

Wenn Sie einen Attributselektor verwenden möchten , warum nicht:

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

Es gibt eine Vielzahl von Attributselektoren, die Sie für verschiedene Szenarien verwenden können, die alle in dem Dokument behandelt werden, auf das ich verweise. Beachten Sie, dass benutzerdefinierte Datenattribute zwar eine "neue HTML5-Funktion" sind,

  • Browser haben normalerweise keine Probleme, nicht standardmäßige Attribute zu unterstützen. Sie sollten sie daher mit Attributselektoren filtern können. und

  • Sie müssen sich auch nicht um die CSS-Validierung kümmern, da sich CSS nicht um Attributnamen ohne Namespace kümmert, solange diese die Selektorsyntax nicht verletzen.

BoltClock
quelle
4
Ist mit allen Navigatoren kompatibel?
Christophe Debove
21
@Christophe Debove: IE7 + und alles andere.
BoltClock
7
CSS scheint dies nicht zu erkennen, wenn das Datenattribut festgelegt oder über JS geändert wird.
4 ʙᴀᴋᴇʀ
30
Nach weiteren Untersuchungen $("#element").data("field","value");scheint sich der Wert der Datenattribute nicht zu ändern, sondern nur die zwischengespeicherte Version des DOM von jQuery. Um das tatsächliche DOM-Attribut zu ändern, muss es verwendet werden $("#element").attr("data-field","value");. Meinen ursprünglichen Kommentar ungültig machen.
5 ʙᴀᴋᴇʀ
2
Ja, es sieht so aus, als würde das Ändern des Datensatzes auch funktionieren. @Matthew - jsfiddle.net/BoltClock/k378xgj3 Vielen Dank für nichts jQuery.
BoltClock
107

In modernen Browsern ist es auch möglich, Attribute unabhängig von ihrem Inhalt auszuwählen

mit: 

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

[anything] {
   /* Styles */
}

Zum Beispiel: http://codepen.io/jasonm23/pen/fADnu

Funktioniert mit einem sehr signifikanten Prozentsatz der Browser.

Beachten Sie, dass dies auch in einem JQuery-Selektor oder mit verwendet werden kann document.querySelector

ocodo
quelle
Wow, ich habe nie gesehen, dass es so verwendet werden kann !! +1! Und FWIW, jetzt, da die Browser-Shots abgelaufen sind, glaube ich, dass es in IE7 + funktioniert, so dass seine Unterstützung so ziemlich allgegenwärtig ist. Es ist lustig, dass nicht einmal Chris Coyier es hier
Camilo Martin
Danke @CamiloMartin Ich habe den Browser-Link entfernt, um Verwirrung / Ärger zu vermeiden.
ocodo
Es wurde ein Link zu Chris Coyiers Thread css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin
ocodo
1
Keine dieser Syntax ist sowieso neu - mehr Leute waren überrascht, dass IE6 sie nicht unterstützte als IE7 +. Sie können davon ausgehen, dass alle CSS2.1-Selektoren in IE8 und höher unterstützt werden - IE7 tut dies am meisten, wenn auch mit einigen obskuren Fehlern. Alle modernen Browser unterstützen seit einiger Zeit Selektoren der Stufe 3 , wobei Chrome stattdessen der Buggy ist.
BoltClock
1
Da wir uns jedoch mit Attributselektoren befassen, ist es interessant festzustellen, dass die in Level 3 ( ^=, *=und $=) eingeführten Teilstring-Attributselektoren auch von IE7 und IE8 unterstützt werden. Vielleicht wurden sie im IE eingeführt, bevor sie standardisiert wurden.
BoltClock
47

Es ist erwähnenswert, CSS3-Teilstring-Attributselektoren zu beachten

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}
Matas Vaitkevicius
quelle
13

Sie können mehrere Selektoren kombinieren und das ist so cool zu wissen, dass Sie jedes Attribut und Attribut basierend auf ihrem Wert auswählen können, wie hrefbasierend auf ihren Werten nur mit CSS.

Mit den Attribut-Selektoren können Sie einige zusätzliche Attribute idund classAttribute ausprobieren

Hier ist eine großartige Lektüre über Attributauswahl

Geige

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>
Erweitern Sie das Snippet

Browserunterstützung:
IE6 +, Chrome, Firefox & Safari

Details können Sie hier überprüfen .

Aamir Shahzad
quelle
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
quelle