Bonjour,

Je me demandais s'il était possible d'appeler plusieurs classes qui commencent ou contiennent une certaine chaîne de caractère, par exemple

.prefix*{
   color:red;
}

et ceci ferait que par exemple .prefixtruc, .prefixmachin et .prefixbidule verraient leur texte devenir rouge.

Le vrai souci c'est que j'ai ceci

et les éléments commençant par jwl_ sont nombreux (et il va y en avoir plein de différents), et ne sont pas entourés d'un conteneur spécifique qui permettrait de les appeler précisément. Ce code est généré par un plugin wordpress (WP Edit).

Est-ce que mes rêves ont un fond de réalité, ou vais-je devoir lister patiemment toutes les classes jwl_... pour donner mes instructions?

Merci par avance

Je crois que c'est ça que tu cherches http://www.w3.org/TR/css3-selectors/#attribute-substrings

Tes rêves deviennent réalité.

Voici :

*[class^="prefix"]{
   color : red;
}

Tous les éléments (representés ici par le *) qui ont une classe préfixée par le mot "prefix" seront maintenant en rouge.

Donc, ton code :

*[class^="jwl_"]{
   color : red;
}

PrincxQn > le * est optionnel ici, il est sous-entendu (mais c'est tout à fait ça, sinon).

Oh que oui. Cool. Mais autant le préciser pour dire qu'il peut spécifier un autre élément (un div, un p, un pre,...) s'il veut.

Cool.

C'est vrai, mais tant qu'à faire, ne pas cibler les éléments html, c'est mieux, non ? (et c'est elle, au fait)

Wah excellent! Merci En fait j'avais vu ce bout de code en cherchant avant, mais je l'avais éludé car je n'avais pas compris que class était un attribut comme les autres... Héhé ^^' C'est super puissant en fait!

Lamecarlate quand tu dis "ne pas cibler les éléments html", ça veut dire quoi? Ce n'est pas ce que le * veut dire dans le code donné par PrinxQn? Si je comprends bien, je devrais plutôt sélectionner mes colonnes avec

div[class^="jwl_"]{
   /* faire un truc */
}

?

Non, ce que je veux dire, c'est qu'on a rarement intérêt à cibler

div[class^="jwl_"] {
   /* faire un truc */
}

par opposition à

[class^="jwl_"] {
   /* faire un truc */
}

Si une classe doit avoir un effet différent suivant qu'elle est sur une div, un paragraphe ou un élément de liste... c'est pas très bon signe

Compris! En effet tu as raison le rôle d'une classe c'est d'être globale

Merci beaucoup tout le monde <3

Bonne continuation !

Je peux dire si je veux, par exemple, que tous les div qui ont la class="greenelmt" doivent avoir un fond vert-citron et que tout les span qui ont cette même class, en plus d'avoir un fond vert-citron, doivent être en inline-block et avoir une largeur de 300px... Perso, je ne vois aucun problème à faire cela !

Dans tous les cas, cela dépend de ce que tu veux faire. Si on se retrouve dans une telle situation il n'y a aucun problème à spécifier.

Bon code à tous !

La compatibilité de ce genre de selecteur est-elle bien assurée ?

Bonjour,

https://caniuse.com/#feat=css-sel3 : sans aucun doute à partir de IE7 inclus. Par contre, faire une recherche plutôt que de remonter un sujet de 2015, ça aurait été mieux, non ?

Bonjour,

Merci !
Je demandais par précaution, au final j'ai cette l'impression qu'il y a toujours des exceptions
C'est vraiment grave ? Je me dis qu'au moins c'est posé, pas mal de personnes doivent retomber sur ce genre de topic, au moins il y a l'information..

Vincent.

-
Edité par vincent41100 16 décembre 2018 à 13:21:22