web-dev-qa-db-fra.com

Sélectionner des éléments par attribut de données en CSS

Est-il possible de sélectionner des éléments dans CSS par leurs attributs de données HTML5 (par exemple, data-role)?

htmlcsshtml5css-selectorscustom-data-attribute
450
Diogo Cardoso

Si vous voulez utiliser un sélecteur d'attribut , bien sûr, pourquoi pas:

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

Il existe une variété de sélecteurs d'attributs que vous pouvez utiliser pour divers scénarios et qui sont tous décrits dans le document que je lie. Notez que, même si les attributs de données personnalisés constituent une "nouvelle fonctionnalité HTML5",

  • les navigateurs n'ont généralement aucun problème à prendre en charge des attributs non standard, vous devriez donc pouvoir les filtrer avec des sélecteurs d'attributs; et

  • vous n'avez pas à vous soucier de la validation CSS non plus, car CSS ne s'intéresse pas aux noms d'attributs non-namespaced tant qu'ils ne cassent pas la syntaxe du sélecteur.

720
BoltClock

Il est également possible de sélectionner des attributs indépendamment de leur contenu dans les navigateurs modernes

avec:

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

[anything] {
   /* Styles */
}

Par exemple: http://codepen.io/jasonm23/pen/fADn

Fonctionne sur un pourcentage très important de navigateurs.

Notez que ceci peut également être utilisé dans un sélecteur JQuery ou en utilisant document.querySelector

100
ocodo

Il convient de noter les sélecteurs d'attributs de sous-chaîne CSS3

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

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

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

Vous pouvez combiner plusieurs sélecteurs, ce qui est très pratique sachant que vous pouvez sélectionner chaque attribut et attribut en fonction de leur valeur, comme href en fonction de leurs valeurs avec CSS uniquement.

Le sélecteur d'attributs vous permet de jouer avec des attributs supplémentaires id et class

Voici une excellente lecture sur sélecteurs d'attributs

Violon

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>

Prise en charge du navigateur:
IE6 +, Chrome, Firefox et Safari

Vous pouvez vérifier les détails ici.

12
Aamir Shahzad

sélecteurs d'attributs CSS avec petit extrait et exemples de travail

1 - [attribut ~ = "valeur"]

2 - [attribut ^ = "valeur"]

- [attribut $ = "valeur"]

4 - [attribut | = "valeur"]

5 - [attribut * = "valeur"]

/* 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>

~ est utilisé pour sélectionner des éléments avec une valeur d'attribut contenant un mot spécifié

/* 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>

^ est utilisé pour sélectionner des éléments dont la valeur d'attribut commence par une valeur spécifiée.

/* 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>

$ sélecteur est utilisé pour sélectionner des éléments dont la valeur d'attribut se termine par une valeur spécifiée.

/* 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>

est utilisé pour sélectionner des éléments avec l'attribut spécifié commençant par la valeur spécifiée.

/* 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>

* est utilisé pour sélectionner des éléments dont la valeur d'attribut contient une valeur spécifiée.

/* 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