Comment faire hériter un élément d'un ensemble de règles CSS pour un autre élément ?

Question

Disons que j'ai un <div> comme celui-ci qui aura toutes les mêmes propriétés avec une image d'arrière-plan ou quelque chose comme ça :

 div.someBaseDiv {
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}

Et j'ai voulu en hériter comme ceci :

 div.someBaseDiv someInheritedDiv {
    background-image: url("images/worldsource/customBackground.gif");
    background-repeat: no-repeat;
    width: 950px;
    height: 572px;
}

Bien sûr, je suis presque sûr que c'est mal écrit, et je n'ai pas peur de demander de l'aide, alors quelqu'un peut-il me dire comment faire fonctionner cela et inclure le balisage HTML ?

Answer 1

Le plus simple est d'ajouter votre élément someInheritedDiv à la première règle comme celle-ci.

 div.someBaseDiv,
#someInheritedDiv
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

Cela indiquera à votre #someInheritedDiv d'appliquer les mêmes styles que div.someBaseDiv. Ensuite, vous étendez cet ensemble de styles avec des styles plus spécifiques à votre #someInheritedDiv :

 #someInheritedDiv
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

C'est ainsi que fonctionne la spécificité en CSS.

Answer 2

Utilisez les deux classes et combinez-les comme ceci :

 .baseClass
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

.baseClass.otherClass /* this means the element has both baseClass and otherClass */
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Le balisage est le suivant :

 <div class="baseClass otherClass"></div>

Maintenant, de cette façon, vous pouvez remplacer baseClass si nécessaire... et puisque vous n'avez pas à ajouter vos nouveaux noms de classe à la définition de baseClass, c'est un peu plus propre.

Answer 3

Ce que vous voulez faire, c'est appliquer du CSS à deux types d'éléments différents, mais leur permettre également d'avoir des différences. Vous pouvez le faire en utilisant du code HTML simple :

 <div class="base">
    <div class"inherited">
    </div>
</div>

Et CSS :

 .base, .inherited{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

.inherited{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}

Cela ajoutera les propriétés partagées aux deux types de div , mais des div

Answer 4

Cela dépend vraiment de votre balisage. Si votre élément hérité réside sous un div avec la classe someBasDiv , alors tous ses éléments enfants hériteront automatiquement de ces propriétés.

Si toutefois, vous souhaitez hériter de la someBaseDiv à n'importe quel endroit de votre balisage, vous pouvez simplement créer l'élément avec lequel vous souhaitez hériter, utilisez ces deux classes comme ceci :

 <div class="someBaseDiv someInheritedDiv">

et ton css serait comme ça :

 div.someBaseDiv
{
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0px;
}

div.someInheritedDiv
{
    background-image:url("images/worldsource/customBackground.gif");
    background-repeat:no-repeat;
    width:950px;
    height:572px;
}