copie css à partir d'une classe à une autre?

Cela peut sembler une question très simple mais je n'arrive pas à trouver une réponse à cela.
Je sais qu'il est possible de définir une règle css pour plus d'un élément à la fois en tant que tel:

.element1, .element2{
  font-size:14px;
}

Est-il possible, cependant, de faire exactement la même chose, mais d'appliquer le css de l'élément après le css pour element1 a été défini? Quelque chose comme ceci:

.element1{
  font-size:14px;
}

/*later in the css... or in a separate file*/

.element2{
 like:".element1";
 font-weight:bold;
}

De sorte que element2 maintenant hérite de la css de l'élément.
La raison pour laquelle je suis en train de faire c'est parce que j'ai un css de définition d'une element1 qui se charge de toutes les pages du site. Alors, pour une page en particulier (qui charge le fichier css principal, avec son propre) je voudrais utiliser le style de element1 et d'y ajouter.
Ce que j'essaie d'éviter le chargement de la définition de element2 pour toutes les pages du site (y compris ceux qui n'ont même pas l'élément[s] avec la classe element2.

Cela pourrait-il être fait?
Je me rends compte que je pourrais facilement obtenir ce avec jQuery (c'est à dire $(".element2").addClass(".element1");) mais je voudrais éviter d'utiliser des scripts pour mon css.

Merci!

OriginalL'auteur Yuval Karmi | 2009-07-31

  1. 8

    Vous pouvez utiliser:

    <div class="element1 element2">

    tout en ayant

    .element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

    et donc les deux classes s'appliquent. jQuery est assez intelligent pour ajouter des classes et supprimer les classes de ce genre.

    Aussi, vous pouvez utiliser quelque chose de plus avancé comme SASS qui s'installe mixin.

    Nice! je n'ai jamais connu quelque chose comme SASS existé. Incroyablement cool, cependant, je probablement ne pas utiliser ce qui est de mon projet. Bien que je suis familier avec la première méthode que vous avez présenté, il m'a donné une idée. Merci beaucoup!
    Ce qu'il a dit. Si vous voulez que votre ".element2" objets ont le style de ".element1" des objets, de leur donner la classe ".element1".

    OriginalL'auteur Silviu Postavaru

  2. 1

    Autant que je sache, non, ce n'est pas possible avec CSS seul. Vous avez déjà identifié un moyen d'atteindre vos objectifs, et je dois dire que c'est la meilleure façon de faire.

    En CSS une classe ne peut hériter de son parent, et seulement si <example-attribute>: inherit; (j'ai utilisé cela avec color:, background-color:, font-family:, font-size: parmi d'autres, mais je vous préviens que si le font-size de la parent d'une taille décrite comme une augmentation ou une diminution, la font-size va changer à l'enfant, aussi.

    je vous remercie pour votre réponse 🙂

    OriginalL'auteur David Thomas

  3. 0

    CSS vraiment besoin de cette fonctionnalité. Spécification de plusieurs classes au niveau de l'élément est grande, mais pas la même chose que d'être en mesure d'aller:

    .my_class { classe:my_global_class; }

    Être en mesure d'avoir une classe à l'utilisation des styles à partir d'une autre classe, serait très puissant. Il serait passer cette partie du modèle d'héritage dans le CSS où il appartient, en laissant moins encombré de balisage.

    Je travaille sur un site, là, où nous avons beaucoup de différentes combinaisons de polices. Certains h et p balises différente selon leur page et le contexte. C'est une vraie douleur d'avoir à le faire à notre liste de polices de police-famille d'avoir à exister dans chaque classe où nous avons besoin d'eux. J'aimerais être capable de faire cela:

    /* defualt pour les balises p */
p { font-family:Times, Arial, Helvetica; } 

/* exceptions */
.arial {font-family:Arial, Times, Helvetica; } 
.segoe {font-family:Segoe, Arial, Helvetica; } 

.mon-page1 p {classe:arial;} 
.mon-page2 p {classe:segoe;}

    Ci-dessus, ma liste de polices existerait dans un endroit central et je peux les appliquer à l'endroit où je veux, purement dans le fichier CSS. Si j'ai 100 p balises dans mon site, puis-je ajouter une "classe" à chacun d'eux pour ces exceptions, qui peuvent être une douleur. Cela est particulièrement vrai, lorsque vous avez plusieurs développeurs travaillent sur un seul site.

    OriginalL'auteur Scott

  4. 0

    De ce que vous décrivez vous le souhaitez .element1 à être disponibles et utilisés sur plusieurs pages, mais sur quelques exceptionnels pages que vous souhaitez éléments de la mise en œuvre de l' .element1 classe pour un look différent, dans votre exemple gras.

    La réponse vous a été donné est certainement une approche et sera certainement le travail. Autre chose que vous pouvez faire est d'inclure d'autres CSS sur le exceptionnelle des pages.

    Par exemple, vous pouvez avoir une allpages.css, qui est d'inclure dans toutes les pages et contient le fichier CSS:

    .element1 {
    font-size: 14px;
}

    Alors vous pouvez avoir un fichier CSS appelé exceptions.css qui contient:

    .element1 {
    font-weight: bold;
}

    Cela fonctionne car lorsque plusieurs règles sont définies pour le même sélecteur que les règles sont regroupées ensemble. En utilisant cette technique, vous n'avez pas à modifier les valeurs de classe pour les éléments HTML.

    OriginalL'auteur Luis Perez

  5. 0

    Une syntaxe semblable à celle utilisée dans http://lesscss.org/

    J'espère que vous trouverez quelque chose d'utile personnel

    OriginalL'auteur Alex Yaroshevich