Surcharge JavaScript du style d'un lien [résolu]

Bonjour à vous, nobles aventuriers du design
J'expérimente en ce moment une difficulté certaine qui me bloque. En effet, j'ai sur mon site (je ne peux donner d'URL, c'est en intranet pour l'instant) de nombreux liens, et notamment certains menant vers des fichiers à télécharger. J'avais trouvé un code js me permettant de leur affecter automatiquement une classe spéciale, et ça marche très bien (je le mets ici, c'est toujours utile à savoir) :

//adds icons on file links without need to write 'class="stuffLink"' on an 'a' tag ; code by Marko Dugonjic (http://www.maratz.com)

function linkIcons() {  
    var linkIcon;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (linkIcon = document.getElementsByTagName('a')[ i ]); i++) {      
            if (linkIcon.href.indexOf('.pdf') != -1) {
                linkIcon.setAttribute('target', '_blank');
                linkIcon.className = 'pdfLink';
            }
            if (linkIcon.href.indexOf('.doc') != -1) {
                linkIcon.setAttribute('target', '_blank');
                linkIcon.className = 'docLink';
            }
            if (linkIcon.href.indexOf('.zip') != -1) {
                linkIcon.setAttribute('target', '_blank');
                linkIcon.className = 'zipLink';
            }
	    if (linkIcon.href.indexOf('.csv') != -1) {
                linkIcon.setAttribute('target', '_blank');
                linkIcon.className = 'csvLink';
            }
	    if (linkIcon.href.indexOf('.xls') != -1) {
                linkIcon.setAttribute('target', '_blank');
                linkIcon.className = 'xlsLink';
            }
	    if (linkIcon.href.indexOf('mailto') != -1) {
                linkIcon.setAttribute('target', '_blank');
		linkIcon.className = 'mailLink';
	    }
        }
    }
}
window.onload = function() {
    linkIcons();
}

(attention, dans la ligne avec getElementsByTagName, enlevez les espaces autour du i, j'ai dû les mettre sinon c'était interprété comme du BBCode ici ^^)

Mes classes de type stuffLink sont comme ça :

.zipLink {
	padding : 2px 19px 2px 0;
	background: transparent url(../images/fileZip.png) no-repeat 100% ; 
	}

Donc la vie est belle, j'ai des petites icones toutes choupi à droite de mes liens.

Sauf que.

Si je décide, dans un souci de les rendre plus visibles, de mettre un background-color sur tous les liens, ceux qui mènent vers des fichiers et qui ont donc leur classe perso, sont affectés aussi, bien évidemment. Et j'aurais bien aimé que cela ne soit pas... Et je n'arrive pas à surcharger dans l'autre sens, en mettant un background:none; dans mes classes stuffLink : cela semble n'avoir aucun effet.
J'ai essayé aussi un

.stuffLink a {background:none;}

, sans résultat apparent.

Ce que j'ai actuellement : (on remarquera que le padding des classes stuffLink s'applique, mais les icones ne sont pas chargées, en tout cas je ne les ai pas trouvées dans les infos de la page données par Firefox)


Ce que je voudrais (tout en gardant mes autres liens avec un background, bien sûr ) :


Auriez-vous une idée ? Merci d'avance.
Modifié par AkaiKen (15 Sep 2009 - 09:03)

Salut,

AkaiKen a écrit :
Si je décide, dans un souci de les rendre plus visibles, de mettre un background-color sur tous les liens

L'idéal aurait été de nous montrer le code css utilisé...

Quoi qu'il en soit, comme ce sont tes liens qui reçoivent une classe il faudrait déjà essayer en remplaçant .stuffLink a {background:none;} par a.stuffLink {background:none;}

La lecture de cet article sur les sélecteurs ne serait peut-être pas inutile.

Si ça ne suffit pas (ou par curiosité ) lire également http://openweb.eu.org/articles/cascade_css/
Modifié par Heyoan (14 Sep 2009 - 21:40)

Mille excuses, pour mettre un background sur les liens, j'ai écrit ceci :

a:link, a:visited {
	background:#f2fced;/*ici*/
	color: #4ba123;	
	font-weight: normal;
	text-decoration: none;
	}

Ensuite, j'ai donc essayé avec a.stuffLink, que j'oublie toujours... C'est incroyable, la différence entre a.truc et .truc a ne veut pas rentrer chez moi...

Et après petits tâtonnements, j'ai trouvé !
Il ne fallait pas chercher à faire en deux fois ^^ j'ai modifié mes classes de

.zipLink { 
    padding : 2px 19px 2px 0; 
    background: transparent url(../images/fileZip.png) no-repeat 100% ;  
    }

en

a.zipLink { 
    padding : 2px 19px 2px 0; 
    background: transparent url(../images/fileZip.png) no-repeat 100% ;  
    }

(puisqu'après tout, cette classe est appliquée directement sur la balise a, je ne l'avais effectivement pas précisé... mais tu l'as très bien vu)

Et cela fonctionne très bien

Merci Heyoan de m'avoir remise sur le droit chemin