Est-il un sélecteur CSS par le préfixe de classe?
Je veux appliquer une règle CSS pour tout élément dont l'une des classes les matchs préfixe spécifié.
E. g. Je veux une règle qui s'appliquera à la div qui a de la classe qui commence avec status-
(A et C, mais pas de B dans l'extrait de code 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-il faisable en vertu de CSS 2.1? Est-il faisable en vertu de toute CSS?
Remarque: je ne sais que je peux utiliser jQuery pour imiter que.
Vous devez vous connecter pour publier un commentaire.
Ce n'est pas faisable avec CSS2.1, mais il est possible avec CSS3 attribut de sous-chaîne de correspondance de sélecteurs (qui sont pris en charge dans IE7+):
Avis le caractère d'espace dans le deuxième sélecteur d'attributs. Ce ramasse
div
éléments dontclass
attribut répond à l'une de ces conditions:[class^="status-"]
— commence par "statut"[class*=" status-"]
— contient la sous-chaîne de "statut" se produisent directement après un caractère d'espace. Les noms de classe sont séparés par des espaces par la spécification HTML, d'où l'importante de l'espace de caractère. Cette vérification n'importe quelle autre classe après la première si plusieurs classes sont spécifiés, et ajoute un bonus de vérification de la première classe dans le cas où la valeur de l'attribut est l'espace-collier (qui peut se produire avec certaines applications qui sortieclass
attributs de façon dynamique).Naturellement, cela fonctionne aussi dans jQuery, comme l'a démontré ici.
La raison pour laquelle vous devez combiner les deux sélecteurs d'attribut comme décrit ci-dessus est parce qu'un sélecteur d'attributs tels que
[class*="status-"]
va correspondre à l'élément suivant, qui peut être indésirable:Si vous pouvez vous assurer qu'un tel 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 balisage, il peut être plus simple pour faire le
status-
préfixe son proprestatus
classe au lieu que le Gombo suggère.status-
et vous ne voulez pas mettre tout de suite, le sélecteur devient encore plus compliqué:div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)
Plus vous perdez IE7/IE8 soutien. Heureusement, si votre marge est sain d'esprit, vous n'aurez pas besoin d'exclure une telle classe.[class*=" anim-overlay-"] a:hover:after{...}
. Mes classes CSS sontanim-overlay-1
,anim-overlay-2
.....anim-overlay-8
.anim-overlay-*{...}
?Attribut CSS sélecteurs vous permettra 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 à la "recommandation" de statut pour les 2.1 et 3)
Voici un aperçu de la façon dont je pense *il fonctionne:
[ ]
: est le contenant complexe sélecteurs si vous...class
: "classe" est le attribut vous êtes à la recherche à dans ce cas.*
: modificateur(le cas échéant): dans ce cas - "générique" indique que vous êtes à la recherche pour n'IMPORTE quel match.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:
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 limites, mais je ne vois pas le besoin d'utiliser une combinaison de
^
et*
- comme * est tout...exemple: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
Tout au-dessus d'IE6 seront heureux de vous obéir. : )
noter que:
[class] { ... }
Permettra de sélectionner quoi que ce soit avec une classe...
[class*='test-']
va correspondre à des éléments tels que<div class='foo-test-bar'>
. C'est un cas limite qu'il faut conjuguer ^ et * comme décrit dans ma réponse. Et IE6 ne supporte pas le sélecteur d'attribut.Ce n'est pas possible avec les sélecteurs CSS. Mais vous pouvez utiliser deux classes au lieu d'une seule, par exemple statut et important au lieu de statut important.
Vous ne pouvez pas faire ce pas. Il est l'un sélecteur d'attribut qui correspond exactement ou partielle, jusqu'à ce qu'un signe, mais il ne serait pas travailler ici parce que vous avez plusieurs attributs. Si le nom de la classe vous êtes à la recherche pour toujours être le premier, vous pourriez faire ceci:
Remarque que c'est juste pour souligner ce qui attribut CSS sélecteur est le plus proche, il est recommandé de ne pas assumer les noms de classe sera toujours en avant depuis javascript pourrait manipuler l'attribut.