wake-up-neo.com

Wählen Sie Elemente anhand des Datenattributs in CSS aus

Ist es möglich, Elemente in CSS anhand ihrer HTML5-Datenattribute auszuwählen (z. B. data-role)?

htmlcsshtml5css-selectorscustom-data-attribute
450
Diogo Cardoso

Wenn Sie ein 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, obwohl benutzerdefinierte Datenattribute eine "neue HTML5-Funktion" sind,

  • browser haben normalerweise keine Probleme mit der Unterstützung von Nicht-Standard-Attributen. Sie sollten sie daher mit Attribut-Selektoren filtern können. und

  • sie müssen sich auch keine Sorgen um die CSS-Validierung machen, da sich CSS nicht um Attributnamen ohne Namespace kümmert, solange sie nicht die Syntax der Selektoren verletzen.

720
BoltClock

In modernen Browsern können Attribute auch unabhängig von ihrem Inhalt ausgewählt werden

mit:

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

[anything] {
   /* Styles */
}

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

Funktioniert mit einem sehr hohen Prozentsatz von Browsern.

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

100
ocodo

Es lohnt sich, die CSS3-Selektoren für Teilzeichenfolgenattribute zu beachten

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

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

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

Sie können mehrere Selektoren kombinieren, und das ist so cool, dass Sie jedes Attribut und Attribut basierend auf seinem Wert wie href basierend auf seinem Wert nur mit CSS auswählen können.

Die Attributauswahl ermöglicht es Ihnen, mit den Attributen id und class ein bisschen mehr herumzuspielen

Hier ist eine großartige Lektüre Attribute Selectors

Fiddle

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>

Browser-Unterstützung:
IE6 +, Chrome, Firefox und Safari

Sie können Details überprüfen hier.

12
Aamir Shahzad

CSS-Attributselektoren mit kleinem Ausschnitt und Arbeitsbeispielen

1 - [attribute ~ = "value"]

2 - [Attribut ^ = "Wert"]

- [Attribut $ = "Wert"]

4 - [attribute | = "value"]

5 - [Attribut * = "Wert"]

/* Seven (because it search in all words)*/
div[class="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

~ wird verwendet, um Elemente mit einem Attributwert auszuwählen, der ein bestimmtes Wort enthält

/* Five Six Seven (because it search in all words)*/
div[class~="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

Mit ^ werden Elemente ausgewählt, deren Attributwert mit einem angegebenen Wert beginnt.

/* One Three Five Seven (because it search in beginning)*/
div[class^="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

$ selector wird verwendet, um Elemente auszuwählen, deren Attributwert mit einem angegebenen Wert endet.

/* Two Four Six Seven (Because it search from end) */
div[class$="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

wird verwendet, um Elemente mit dem angegebenen Attribut auszuwählen, beginnend mit dem angegebenen Wert.

/* One Seven (because it start from beggining and search -(hyphen)). ignore started from end */
div[class|="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

* wird verwendet, um Elemente auszuwählen, deren Attributwert einen angegebenen Wert enthält.

/* One Two Three Four Five Six (because it search all group)*/ 
div[class*="group"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>
0
Vahid Akhtar