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

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

E. G. 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 en vertu d'une spécification CSS?

Remarque: je ne sais que je peux utiliser jQuery pour imiter.

132
demandé sur TylerH 2010-07-27 00:22:08

4 réponses

ce n'est pas faisable avec CSS2.1, mais il est possible avec CSS3 attribut substring-matching selectors (qui sont pris en charge dans IE7+): 

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

noter le caractère d'espace dans le deuxième sélecteur d'attribut. Il s'agit des éléments div dont l'attribut class remplit l'une des deux conditions suivantes:

  • [class^="status-"] - commence par "statut" (évidemment).

  • [class*=" status-"] - contient la sous-couche "statut -" se produisant directement après un caractère d'espace. Les noms de classe sont séparés par des espaces selon 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érifier la première classe dans le cas où la valeur de l'attribut est rembourré (ce qui peut se produire avec certains les applications qui produisent des attributs class dynamiquement).

naturellement, cela fonctionne aussi à 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-"] correspond à 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 que ces un scénario jamais arriver, alors vous êtes libre d'utiliser un 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 markup, il peut être plus simple de simplement faire le préfixe status- son propre status classe à la place comme Gumbo suggère .

291
répondu BoltClock 2017-05-23 12:10:05
Les sélecteurs D'attribut CSS

vous permettront de vérifier les attributs d'une chaîne. (dans ce cas - la classe-nom)

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 le attribut vous êtes dans ce cas.
  • * : modificateur(s'il y a lieu): dans ce cas - "joker" indique que vous recherchez une correspondance.
  • test- : la valeur (en supposant qu'il en est 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 de bonnes raisons, avec l'élément de trop

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

j'ai essayé de trouver des cas de bordures, 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 au-dessus de IE6 obéira avec joie. :)

noter que:

[class] { ... }

sélectionnera tout ce qui a une classe...

9
répondu sheriffderek 2017-07-08 01:38:29

cela 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
répondu Gumbo 2010-07-26 20:23:45

tu ne peux pas faire ça non. Il y a un sélecteur d'attribut qui correspond exactement ou partiellement jusqu'au signe a, mais il ne fonctionnerait pas ici parce que vous avez plusieurs attributs. Si le nom de la 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 en tête puisque javascript pourrait manipuler l'attribut.

2
répondu SBUJOLD 2010-07-26 21:22:32