Discussion :

[_jey_]

Bonjour,


Le titre de mon sujet est peut-être un peu obscur (désolé !).

Je cherche à sélectionner plusieurs éléments qui ont pour seul point commun une partie de leur attribut name...
Je sais que l'on peut utiliser "[attribut ~= valeur]" ou "[attribut |= valeur]" mais en l'occurence, la partie commune de l'attribut name n'est pas séparée du reste par un caractère spécifique... et je ne peux pas modifier ce nom (ni quoique ce soit, à part le CSS).


Merci d'avance pour vos lumières !

[12monkeys]

Bonsoir

Tu as la possibilité d'utiliser soit ^, soit *, soit $...

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
[name^="valeur"] { ton style }
[name*="valeur"] { ton style }
[name$="valeur"] { ton style }

Le caractère ^ te permet de rechercher les éléments dont l'attribut commence par une certaine valeur.
Le caractère * te permet de rechercher les éléments dont l'attribut contient une certaine valeur, peut importe où elle se trouve.
Le caractère $ te permet de rechercher les éléments dont l'attribut se termine par une certaine valeur.

[_jey_]

Merci pour ta réponse ! Sur les quelques sites que j'ai visités à ce sujet, aucun ne parlait de cette astuce -_-

Mais mon problème ne s'arrête pas là (ça ne serait pas drôle sinon !) :
j'ai maintenant réussi à sélectionner les éléments qui me conviennent, mais ces éléments sont des spans, et ce sont les cases qui contiennent ces champs (qui elles n'ont pas d'id) auxquelles je souhaite ajouter un style...
Y'a-t-il un équivalent du parentNode de Javascript pour le CSS ? Je sais que l'on peut utiliser les fameuses expressions CSS pour IE, mais est-ce possible avec les "vrais" navigateurs ?
Ou autre possibilité : peut-on sélectionner un élément (toujours en CSS) grâce à un de ses fils ?

[Macmillenium]

Bonjour,

mais ces éléments sont des spans, et ce sont les cases qui contiennent ces champs (qui elles n'ont pas d'id) auxquelles je souhaite ajouter un style...

Pourrais tu expliquer un peu plus stp, sur quels éléments veux tu appliquer le style

Ou autre possibilité : peut-on sélectionner un élément (toujours en CSS) grâce à un de ses fils ?

Les styles sont en cascade et passent de parent à enfant et non pas l'inverse.

[_jey_]

Les styles sont en cascade et passent de parent à enfant et non pas l'inverse.

C'est bien ce que je pensais...


J'ai en fait un formulaire dans une application web que je modifie. Ce formulaire se présente sous forme de tableau (qui lui-même contient d'autres tableaux, etc...). Or certains champs n'ont pas la même disposition que les autres, et j'aimerais donc attribuer un style spécifique à chaque "case" <td> qui contient un de ces champs.
Malheureusement, les spans ont des id bien distincts, mais pas les colonnes ou lignes du tableau.

Dans un soucis de versionnement, je cherche à ne modifier que le CSS pour l'affichage graphique.

[_jey_]

Sur l'exemple joint, j'ai un exemple de champs normal, c'est à dire avec l'intitulé en face de sa valeur, et en dessous les champs "spéciaux" (avec le texte en rouge, grâce au [name$="fin_du_nom"]).
Sur un champs normal, je mets une bordure complète sauf le côté gauche (pour encadrer toute la ligne, et ne pas avoir de séparation). Pour les champs "spéciaux", je voudrais tout simplement les encadrer complètement, côté gauche compris.

[Macmillenium]

Je comprends mieux.

La seule solution que je vois c'est de rajouter la bordure sur tes champs "spéciaux" directement => attribuer un display:block; et renseigner le width et le height ...

[_jey_]

Bon finalement j'ai craqué, j'ai modifié le code xsl de l'application, et j'ai ajouté un id pour les cases concernées... j'écrirais un script pour ajouter ça à chaque installation de nouvelle version !

Merci Macmillenium, j'ai essayé ta technique, mais pour que la bordure soit bonne, je devais changer la taille des champs, mettre des padding dans tous les sens, et ça n'aurait jamais eu la même tête au final sur tous les navigateurs :p