Pouvez-vous cibler des éléments en fonction de la présence d'un attribut « data-* » avec CSS ?

Sélection de nom d'attribut avec caractères génériques

Dans le développement Web, les sélecteurs CSS offrent un contrôle précis sur les éléments HTML en fonction de leurs attributs. Parmi les différents sélecteurs basés sur des attributs, il existe un besoin spécifique de cibler les éléments possédant un attribut "data-*". Alors que diverses méthodes existent pour sélectionner des éléments en fonction de la valeur de l'attribut, la question se pose : peut-on cibler des éléments uniquement en fonction de la présence d'un attribut "data" ?

Pour comprendre les possibilités actuelles, examinons l'attribut existant. sélecteurs basés sur la valeur :

• Correspondance exacte : Sélectionne les éléments dont la valeur de l'attribut est égale à une valeur spécifiée ([data-something="value"]).
• Correspondance partielle (Début) : Sélectionne les éléments dont la valeur d'attribut commence par un préfixe spécifié ([data-something^="value"]).
• Correspondance partielle (Fin ): Sélectionne les éléments dont la valeur d'attribut se termine par un suffixe spécifié ([data-something$="value"]).
• Correspondance partielle (n'importe où) : Sélectionne les éléments où la valeur de l'attribut contient une sous-chaîne spécifiée ([data-something*="value"]).

Cependant, pour le cas spécifique du ciblage d'éléments en fonction du nom de l'attribut lui-même, il n'existe qu'un seul option :

• Nom de l'attribut présent : Sélectionne les éléments qui possèdent un attribut spécifique ([data-something]).

Malheureusement, il existe actuellement pas de sélecteurs génériques pour les noms d'attributs, tels que [data-*]. Cela signifie qu'il n'est pas possible de cibler des éléments dotés d'un attribut « data » en utilisant uniquement CSS.

Néanmoins, des efforts sont en cours au sein de la spécification Selectors niveau 3 pour introduire une fonctionnalité de caractère générique pour les noms d'attribut. Une syntaxe proposée qui a gagné du terrain est :

• x-admin-* : Sélectionne les éléments avec un nom d'attribut commençant par "x-admin-".
• [data-my-*] : Sélectionne les éléments dont le nom d'attribut commence par "data-my-".

Bien que ces sélecteurs ne fassent pas encore partie du standard, ils démontrent le potentiel de noms d'attributs génériques à l'avenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!