Spécificité de selecteurs

Hello,

Je bute sur un petit souci classique de spécificité de sélecteur.
J'ai défini un style général pour mes submits via un sélecteur d'attribut, style lui même surchargé sur certaines pages ayant une dominante de couleur différente.
J'en arrive à un code de ce genre :

/*common.css*/
input[type=submit] {
	background: red;
}

input[type=submit]:hover, input[type=submit]:focus {
	background: green;
}

input[disabled] {
	background: grey !important;
}

/*page1.css*/
.page1 input[type=submit] {
	background: yellow;
}

.page1 input[type=submit]:hover, .page1 input[type=submit]:focus {
	background: yellow;
}

Ce qui me gêne le plus, c'est de devoir utiliser !important pour la règle disabled, mais j'aimerais autant faire que possible ne pas devoir la redéclarer dans les fichiers pageX.css. Comment procédez-vous dans ce genre de cas pour garder l'aspect modulaire? Auparavant je surchargeais dans les css de chaque page, mais cette méthode est foireuse sur le long terme.

Merci d'avance.

Tu es vraiment obligé d'avoir des feuilles de styles multiples ? Pour les performances cela reste, autant que possible, à éviter.

Bonjour,

pourquoi tu reprends pas le sélecteur de départ avec en plus le nouvel attribut ?

input[type=submit]{disabled} {
  /* */
}

edit: je met des {} à la place des crochets, le script bbcode2smiley me gonfle
Modifié par Felipe (07 Dec 2011 - 12:22)

jb_gfx a écrit :
Tu es vraiment obligé d'avoir des feuilles de styles multiples ? Pour les performances cela reste, autant que possible, à éviter.

Les feuilles sont splittées pour le dev mais seront concaténées pour la prod, c'est juste que c'est plus simple pour s'y retrouver. Et encore, si on prends en compte les connections parallèles, plus le fait que certaines pages ne seront jamais vues du visiteur, l'argument des perfs reste sujet à caution (faudrait voir au cas par cas).

Felipe a écrit :
pourquoi tu reprends pas le sélecteur de départ avec en plus le nouvel attribut ?

C'est vrai que je n'y avais pas pensé sur le coup, mais du coup les deux règles ont la même spécificité :

input[type=submit]{disabled} => 0, 0, 2, 1
.page1 input[type=submit] => 0, 0, 2, 1.

Donc ça marche, mais à condition de jouer sur l'ordre des feuilles (ce qui ne m'arrange pas, je voulais aller du général au cas particulier, vu que je me basais sur la méthode Daisy), et doubler hover et focus sur le disabled (ça c'est pas la mort par contre).

J'ai fait un petit Fiddle résumant le tout.