web-dev-qa-db-fra.com

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 qui a une classe qui 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] et div[class~=status-]

Est-ce faisable sous CSS 2.1? Est-ce faisable avec une spécification CSS?

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

csscss-selectors
154
THX-1138

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

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

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

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

  • [class*=" status-"] - contient la sous-chaîne "status-" apparaissant directement après un caractère d'espacement. Les noms de classe sont séparés par des espaces conformément à la spécification HTML , d'où le caractère d'espace significatif. Ceci 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 de l'attribut est complétée par des espaces (ce qui peut arriver avec certaines applications class attribue dynamiquement).

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

La raison pour laquelle vous devez combiner deux sélecteurs d'attribut, comme décrit ci-dessus, est un sélecteur d'attribut tel que [class*="status-"] correspondra à l'élément suivant, 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 ne se produira jamais , vous êtes alors libre d'utiliser un tel sélecteur par souci de simplicité. Cependant, la combinaison ci-dessus est beaucoup plus robuste.

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

323
BoltClock

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: 'classe' est l'attribut que vous regardez dans ce cas.
  • *: modificateur (le cas échéant): dans ce cas, "caractère générique" indique que vous recherchez une correspondance.
  • test-: la valeur (en supposant qu'il en existe un) de l'attribut - qui contient la chaîne "test-" (qui peut être n'importe quoi)

Donc, 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 Edge, mais je ne vois pas la nécessité d'utiliser une combinaison de ^ et * - comme * obtient tout ...

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

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

Tout ce qui précède IE6 obéira avec joie. :)

notez que:

[class] { ... }

Je choisirai n'importe quoi avec une classe ...

10
sheriffderek

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

6
Gumbo

Tu ne peux pas faire ça non. Il y a un sélecteur d'attribut qui correspond exactement ou partiellement jusqu'au signe -, mais cela ne fonctionnerait pas ici car vous avez plusieurs attributs. Si le nom de la classe que vous recherchez serait toujours le premier, procédez comme suit:

<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.

2
SBUJOLD