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

Question

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

Demandé el 26 de Juillet, 2010: Quand la question a-t-elle été
157749 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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'applique aux 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] y div[class~=status-]

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

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

Demandé el 26 de Juillet, 2010 par THX-1138

Answer 1

3 Réponses

Answer 2

23voto

sheriffderek Points 2429

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

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

(il semble qu'il soit en fait au statut de "recommandation" pour les versions 2.1 et 3)

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

[ ] : c'est le conteneur pour les sélecteurs complexes si vous voulez...
class : la "classe" est le attribut que vous recherchez dans ce cas.
* Modificateur (le cas échéant) : dans ce cas, "wildcard" indique que l'on recherche n'importe quelle correspondance.
test- la valeur (en supposant qu'il y en ait une) de l'attribut - qui contient la chaîne "test-" (qui peut être n'importe quoi)

Ainsi, par exemple :

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

Vous pouvez ê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 particuliers, mais je ne vois pas la nécessité d'utiliser une combinaison de ^ y * - car * obtient tout...

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

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

Tout ce qui est supérieur à IE6 obéira avec plaisir : )

noter que :

[class] { ... }

Sélectionne tout ce qui a une classe...

Répondu el 11 de Septembre, 2015 par sheriffderek (2429 Points )

Answer 3

5voto

Gumbo Points 279147

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

Répondu el 26 de Juillet, 2010 par Gumbo (279147 Points )

Answer 4

2voto

SBUJOLD Points 1071

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 fonctionnerait pas ici parce que vous avez plusieurs attributs

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

N

Répondu el 26 de Juillet, 2010 par SBUJOLD (1071 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: