Existe-t-il un sélecteur CSS par préfixe de classe?

Je souhaite appliquer une règle CSS à tout élément dont l'une des classes correspond au préfixe spécifié.

Par exemple, je veux une règle qui s'appliquera à div dont la classe commence par status-(A et C, mais pas B dans l'extrait suivant):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Une sorte de combinaison de:
div[class|=status]etdiv[class~=status-]

Est-ce faisable sous CSS 2.1? Est-ce faisable avec n'importe quelle spécification CSS?

Remarque: je sais que je peux utiliser jQuery pour émuler cela.

Ce n'est pas faisable avec CSS2.1, mais c'est possible avec les sélecteurs de correspondance de sous-chaînes d'attributs CSS3 (qui sont pris en charge dans IE7 +):

div[class^="status-"], div[class*=" status-"]

Notez le caractère espace dans le deuxième sélecteur d'attribut. Cela récupère les divéléments dont l' classattribut remplit l'une de ces conditions:

• [class^="status-"] - commence par "status-"

• [class*=" status-"]- contient la sous-chaîne "status-" apparaissant directement après un caractère espace. Les noms de classe sont séparés par des espaces conformément aux spécifications HTML , d'où le caractère d'espace significatif. Cela vérifie toutes les autres classes après la première si plusieurs classes sont spécifiées, et ajoute un bonus de vérification de la première classe au cas où la valeur d'attribut serait remplie d'espace (ce qui peut arriver avec certaines applications qui produisent des classattributs de manière dynamique).

Naturellement, cela fonctionne également dans jQuery, comme démontré ici .

La raison pour laquelle vous devez combiner deux sélecteurs d'attribut comme décrit ci-dessus est qu'un sélecteur d'attribut tel que [class*="status-"]correspondra à l'élément suivant, ce qui peut être indésirable:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

Si vous pouvez vous assurer qu'un tel scénario ne se produira jamais , vous êtes libre d'utiliser un tel sélecteur pour des raisons de simplicité. Cependant, la combinaison ci-dessus est beaucoup plus robuste.

Si vous avez le contrôle sur la source HTML ou l'application générant le balisage, il peut être plus simple de créer simplement le status-préfixe dans sa propre statusclasse, comme le suggère Gumbo .

Les sélecteurs d'attributs CSS vous permettront de vérifier les attributs d'une chaîne. (dans ce cas - un nom de classe)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(on dirait qu'il est en fait au statut de `` recommandation '' pour 2.1 et 3)

Voici un aperçu de la façon dont je * pense que cela fonctionne:

• [ ]: est le conteneur pour les sélecteurs complexes si vous voulez ...
• class: 'class' est l' attribut que vous regardez dans ce cas.
• * : modificateur (le cas échéant): dans ce cas - "wildcard" indique que vous recherchez N'IMPORTE QUELLE correspondance.
• test- : la valeur (en supposant qu'il y en a un) de l'attribut - qui contient la chaîne "test-" (qui pourrait être n'importe quoi)

Ainsi, par exemple:

[class*='test-'] {
  color: red;
}

Vous pourriez être plus précis si vous avez une bonne raison, avec l'élément aussi

ul[class*='test-'] > li { ... }

J'ai essayé de trouver des cas extrêmes, mais je ne vois pas la nécessité d'utiliser une combinaison de ^et *- car * obtient tout ...

exemple: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

Tout ce qui est au-dessus d'IE6 obéira avec plaisir. :)

Notez que:

[class] { ... }

Sélectionne n'importe quoi avec une classe ...

Cela n'est pas possible avec les sélecteurs CSS. Mais vous pouvez utiliser deux classes au lieu d'une, par exemple status et important au lieu de status-important .

Vous ne pouvez pas faire ça non. Il y a un sélecteur d'attribut qui correspond exactement ou partiellement jusqu'au signe -, mais cela ne fonctionnera pas ici car vous avez plusieurs attributs. Si le nom de classe que vous recherchez est toujours le premier, vous pouvez le faire:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

Notez que ceci est juste pour indiquer quel sélecteur d'attribut CSS est le plus proche, il n'est pas recommandé de supposer que les noms de classe seront toujours devant car javascript pourrait manipuler l'attribut.