Pouvez-vous cibler des éléments avec n'importe quel nom d'attribut à l'aide de sélecteurs CSS ?

Sélecteur CSS pour un ciblage d'attributs aveugle

Introduction

Le développement Web utilise souvent des sélecteurs CSS pour manipuler des éléments en fonction d'attributs spécifiques . Lorsqu'il s'agit d'attributs de données, il devient crucial de comprendre les options de ciblage disponibles et leurs limites.

Noms d'attributs génériques

Le concept de noms d'attributs génériques découle de la nécessité pour sélectionner des éléments qui possèdent un attribut dans un espace de noms spécifique, quel que soit son nom. Bien que cela puisse sembler une solution idéale, il n'existe actuellement aucun sélecteur CSS capable d'atteindre cette fonctionnalité.

Options disponibles

Cependant, il existe des sélecteurs qui vous permettent de ciblez les valeurs d'attribut en fonction de modèles spécifiques :

• [data-something='value'] cible les éléments avec un attribut de données nommé "data-something" et une valeur exactement égale à "value".
• [data-something^='value'] sélectionne les éléments où "data-something" commence par "value".
• [data-something*='value'] cible les éléments où "data- quelque chose" contient "valeur".

Ciblage des attributs avec n'importe quel nom

Malheureusement, il n'existe aucun sélecteur qui cible directement les éléments avec N'IMPORTE QUEL nom d'attribut. Cela signifie que les noms d'attributs génériques, tels que [data-*], ne sont pas pris en charge.

Proposition de mise en œuvre future

Des discussions sont en cours au sein de la communauté CSS pour introduire une syntaxe plus complète pour le ciblage des attributs. Une suggestion proposée par Simon Pieters consiste à utiliser des caractères génériques dans la déclaration de l'espace de noms :

• x-admin-* correspond à n'importe quel attribut dans l'espace de noms x-admin.
• [data-my-* ] cible tout attribut commençant par data-my.

Bien que ces propositions ne soient pas encore standardisées, elles indiquent de futurs développements potentiels en matière de ciblage d'attributs.

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!