web-dev-qa-db-fra.com

ajout de classe css à plusieurs éléments

J'ai créé une classe CSS appelée "bouton" et l'ai appliquée à toutes mes balises INPUT en utilisant simplement:

.button input
{
//css stuff here
}

<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>

ce qui fonctionne bien, mais j'ai ensuite ajouté un autre bouton, mais cela ne fait pas partie de mon formulaire, c'est juste un espace réservé qui est déclenché avec javascript et ouvre un iFrame. Comme je voulais qu'il ressemble à tous les "vrais" boutons, j'ai utilisé la même classe.

<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>

Le problème que j'avais était que si je quittais la classe en tant que .button input le <a> tag ne l'a pas vu. Si j'ai supprimé la partie input du CSS, tous mes boutons ont des carrés gris au milieu.

Je l'ai donc résolu avec .button input,a

Cela a bien fonctionné. . . Jusqu'à ce que je regarde une autre page et que je trouve tout mon <a> les balises étaient désormais formatées avec la classe 'button', même si cette classe n'était pas appliquée.

Ma question est alors de savoir comment puis-je appliquer la même classe CSS à <input> et <a> tags en même temps, mais uniquement si j'ai explicitement ajouté class="button".

cssclass
28
IGGt

Vous devez également qualifier la partie a du sélecteur:

.button input, .button a {
    //css stuff here
}

Fondamentalement, lorsque vous utilisez la virgule pour créer un groupe de sélecteurs , chaque sélecteur individuel est complètement indépendant. Il n'y a aucune relation entre eux.

Votre sélecteur d'origine faisait donc correspondre "tous les éléments de type" entrée "qui sont des descendants d'un élément avec le nom de classe" bouton ", et tous les éléments de type" a "".

49
James Allardice

Essayez d'utiliser:

.button input, .button a {
    // css stuff
}

Lisez également sur CSS.

Edit: Si c'était moi, j'ajouterais la classe de bouton à l'élément, pas à la balise parent. Ainsi:

HTML:

<a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />

CSS:

.button {
    // css stuff
}

Pour utiliser des trucs CSS spécifiques:

input.button {
    // css stuff
}
a.button {
    // css stuff
}
7
besluitloos
.button input,
.button a {
    ...
}
2
scoota269

essaye ça:

.button input, .button a {
//css here
}

Cela appliquera le style à toutes les balises imbriquées à l'intérieur de <p class="button"></p>

1
Dan