[Résolu] Question formidable choix alternatif

Général
1

Bonjour,
Dans un formulaire formidable j’utilise une liste de checkboxes qui prennent toutes des noms multiple_7_1, multiple_7_2, …
Je testais l’utilisation du choix alternatif (avec un label du genre « autre ») qui permet de faire apparaitre un input de texte pour que l’internaute saisisse lui-même une option différente de celles proposées. Tout ça marche parfaitement.
Je souhaitais styler ce champ un peu différemment et je n’arrive pas à cibler ce div.
Tous les choix sont encapsulés dans des div genre:

<div class="choix choix_multiple_7_2"><div>

Le div du « autre » est lui de ce genre:

<div class="choix choix_@choix_alternatif"><div>

Donc avec une classe choix_@choix_alternatif qui ici en tous cas ne semble pas du tout répondre à mes injonctions de styles. J’ai tenté pas mal de choses, c’est en fait comme si je n’arrivais pas à atteindre ce div. J’y arrive parfaitement si je mets un style sur div.choix (et dans ce cas ça style tous les autres div.choix) mais dès que je tente div.choix.choix_@choix_alternatif (qui serait la bonne écriture je pense, le div a bien ces 2 classes) ou div.choix_@choix_alternatif rien n’y fait …
Donc ma question porte sur la présence de ce @ dans le nom de classe, ça ne semble pas interdit mais c’est en tout cas pas recommandé … Quelqu’un a-t-il déjà réussi à styler cette classe ? (et oui j’ai tenté les !important ou autres du même genre). Ou alors le @ est de trop et c’est une erreur ?
Merci !
Pierre.

2

Bonne question. J’avoue que quand j’ai mis le @ dans la class du choix alternatif, c’était pas pour styler, mais pour pouvoir requeter en JS. Du coup aucune idée :stuck_out_tongue:

@rastapopoulos un avis?

3

C’est rassurant il y a une raison ! je peux peut-être styler en js :slight_smile: …

4

Ah non en fait c’est que la classe est constitué automatiquement a partir de la clé, et je voulais une clé préfixé avec @ pour évtier les ennuis à la réception et mieux gérer le stockage en base. Mais du coup effectivement ca ajoute une classe css pas forcément prévue pour cela.

5

et donc

1). Il faudrait sans douter améliorer le generateur de classe dans saisies pour remplacer le @ par autre chose pour respecter la grammaire. Cf Grammar of CSS 2.1 Which characters are valid in CSS class names/selectors? - Stack Overflow
2) en attendant tu peux faire

.choix:has([value="@choix_alternatif"]) {
	background-color: red!important;
}
6

Le caractère « @ » est réservé en CSS (les @ rules). Mais généralement on peut l’échapper s’il est dans une chaine avec antislash \

Tu peux essayer .choix_\@choix_alternatif et ça devrait être reconnu dans tous les navs, et donc avec la même « puissance » de sélection (faible), par rapport au « has » qui augmente trop le poids.

7

@rastapopoulos : nos posts se sont croisés …

J’ai lu en long et en large le StackOverFlow cité et il s’avère que finalement (et bien que certains posts disent le contraire) tous les caractères sont autorisés dans les noms de classes, il y a même vers le bas un exemple ou le nom de classe est un emoji, avec une démo fonctionnelle !!

Mais il y a un mais, quand on utilise un caractère spécial il doit être échappé … j’ai donc ré-essayé avec:

div.choix.choix_\@choix_alternatif

Et ça marche !! La conclusion de tout ça est qu’à mon avis il vaut mieux s’en tenir à « a-zA-Z_- » mais que si nécessaire c’est possible …
Content d’avoir appris quelque chose aujourd’hui !