Comment faire : Sélecteur CSS selon autre propriété/valeur CSS ?

Bonjour à tou(te)s,

Je me pose la question suivante : existe-t-il un moyen de surcharger en CSS une propriété selon une certaine valeur, et ce quelque soit l'élément ?

Un petit exemple sera plus clair... Disons que j'utilise un socle CSS qui m'est fourni et où toute la charte graphique est "verte". J'utilise ce socle pour développer un nouveau site, mais moi je veux juste que tout ce qui est "vert" devienne "bleu" pour ma charte graphique. Que ce soit le background d'un bouton, d'une cellule de tableau, d'une fond d'une div quelconque... tout élément quoi !

Je voudrais donc une sorte de sélecteur CSS comme on peut le faire avec des attributs du DOM

Par exemple on peut faire :

INPUT[type="text"]{
background-color:blue;
}

Pour la couleur de fond de tous les INPUT mais uniquement ceuw de type "text"

ou bien :

[title="coucou"]{
background-color:blue;
}

Pour sélectionner tous les éléments qui ont un attribut HTML "title" qui vaut "coucou"...


Moi il me faudrait pouvoir sélectionner non pas selon un attribut HTML, mais selon un attribut CSS, soit un truc du genre :

[background-color="#95BF0D"]{
background-color: #146FB6;
}

Pour changer tout ce qui a un fond vert par un fond bleu, en une seule fois, et sans savoir à l'avance quel élément pourra avoir ce fond vert...

Est-ce possible, d'une manière ou d'une autre ?!?

J'ai l'impression que non, ce qui est bien dommage...

Si vous avez des idées, merci par avance pour vos retours !


A bientôt

Comment pourrais-tu ne pas savoir quels éléments ont des fonds verts étant donné que c'est toi qui les as définis dans ton css Oo

Salut,

J'utilise JSF pour mon appli.
J'utilise aussi des composants richfaces (par exemple "rich:calendar" pour un sélecteur de dates)

Le socle CSS qui m'est fourni surcharge les composants richfaces pour leur mettre du vert en fond.

Dès que j'utilise un nouveau composant richfaces (ici le calendrier), tout est "vert".
Il faut donc qu'à la main je trouve tous les cas possibles où j'ai du vert en fond (le header du calendrier, le bouton OK, la celuule de la date sélectionnée, ...). Peut être que je vais me rendre compte demain que si je change de mois, ou si je configure différemment le composant calendar, je vais avoir d'autres éléments qui vont apparaître en vert et que j'aurais oublié...

Donc je trouvais ça pratique si je pouvais tout changer d'un coup : "change moi toutes les couleurs de fond "vert" par du "bleu" !

Le jour où je vais vouloir utiliser un nouveau composant richfaces, je ne me poserai même pas la quesiton si il y avait un système comme je recherche, mon composant sera déjà "bleu" et plus "vert" !

J'espère que c'est plus clair... !

En CSS ce n'est pas faisable, il faut passer par JS...

Mmmm... je m'en doutais bien... Tant pis ! Mais "je suis vert" !

Je vais pas faire une usine à gaz en JS juste pour ça, je vais surcharger gentiment "à l'ancienne" élément par élément tout ce que je trouve de "vert" en "bleu".

C'est dommage, ça serait une fonctionnalité sympa... peut être pour CSS4 ?

Merci pour ton aide en tout cas.

A+

Il y a peut-être moyen de se simplifier la tâche avec Less, mais je n'y ai pas assez toucher pour savoir comment ^^'

Edit : Après un rapide coup d'oeil, j'ai rien trouvé pour ça...
Modifié par Gothor (02 Jul 2012 - 14:50)

yep!
Merci pour l'info, je ne conaissais pas du tout "LESS".

Mais en effet, je vais éviter d'utiliser un truc qui sort un peu trop des "standards"...

D'ailleurs, même pour mon besoin si ce que cherchais existait, je suis pas certain que j'aurais pû l'utiliser, car je dois être compatible avec de nombreux navigateurs... dont IE7 et 8 !

Et je crois bien qu'un sélecteur CSS assez "simple" du genre "tous les éléments sur la première ligne d'un tableau" ne fonctionnait pas sous IE7 ou 8... donc bon pas de regrets !

Merci qd même pour l'info, ça vaudra la coup à l'occasion que je jette un coup d'oeil à ce "LESS" pour de futurs devs !

A+

Bonjour,

Il n'y a pas d'incompatibilité entre LESS et les navigateurs car c'est un framework qui au final te créer un fichier css tout à fait normal.
L'idéal pour toi serait qu'un fichier LESS soit fourni avec tes composants richfaces comme c'est le cas avec bootstrap de twitter ... Si ce n'est pas le cas !

tooliphone a écrit :
Donc je trouvais ça pratique si je pouvais tout changer d'un coup : "change moi toutes les couleurs de fond "vert" par du "bleu" !

Bonjour, ce n'est pas possible en CSS et heureusement. Une horreur de conception pareille illisible et in-maintenable est généralement la preuve d'une mauvaise conception en amont.

En l'occurence, la mauvaise conception vient de richfaces et de son système de preprocessing interne (Pas de LESS possible, richfaces bricole un truc sur un autre système) qui a pour conséquence de réduire à néant tout l'utilité du "en cascade" de css. En gros chaque petite personnalisation de richfaces nécessite des heures de travail en aval pour réajuster. Je travaille désormais avec PrimeFaces qui se croche principalement sur jQueryUI et qui est bien mieux conçu. Avec ces expériences, j'aurais tendance à dire: utilise richfaces tel quel, ou pas.

OK, merci à tous pour vos réponses très intéressantes !

Pour richfaces, je n'ai pas le choix je dois l'utiliser, mais de toutes façons tant pis ce n'est pas bien grave je peux bien surcharger quelques classes...

En tout cas je me pencherait sur LESS et primefaces à l'occasion, ça a l'air d'être intéressant !

Merci encore pour vos retours, toujours autant de qualité sur Alsacréations...

A+