copier css d'une classe à une autre?

Question

Cela peut sembler une question très fondamentale, mais je n’ai pas semblé y trouver de réponse. Je sais qu'il est possible de définir une règle CSS pour plusieurs éléments à la fois:

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

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

.element1{
  font-size:14px;
}

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

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

Donc, cet élément2 hérite maintenant du css de l’élément un. La raison pour laquelle j'essaye de faire cela est parce que j'ai une définition CSS pour un élément1 qui se charge pour toutes les pages du site. Ensuite, pour une page particulière (qui charge le fichier css principal, ainsi que le sien), je voudrais utiliser le style de element1 et l’ajouter. Ce que j'essaie d'éviter, c'est de charger la définition de element2 pour toutes les pages du site (y compris celles qui n'ont même pas d'élément [s] avec la classe element2.

Cela pourrait-il être fait? Je réalise que jQuery pourrait facilement y parvenir (c'est-à-dire $(".element2").addClass(".element1");), mais j'aimerais éviter d'utiliser des scripts pour mes fichiers CSS.

Merci!

Answer 1

Vous pouvez utiliser:

<div class="element1 element2">

en ayant

.element1{
  font-size:14px;
}

.element2{
  font-weight:bold;
}

et ainsi les deux classes s'appliqueront. jQuery est assez intelligent pour ajouter des classes et supprimer des classes comme celle-ci.

Vous pouvez également utiliser quelque chose de plus avancé, tel que SASS qui autorise les mixins.

Answer 2

Autant que je sache, non, cela n’est pas possible uniquement avec CSS. Vous avez déjà identifié un moyen d'atteindre vos objectifs, et je dois dire que c'est le meilleur moyen.

En CSS, une classe ne peut hériter que de son parent, et seulement si <example-attribute>: inherit; (je l'ai déjà utilisé avec color:, background-color:, font-family:, font-size: parmi d'autres, même si je vous préviens que si font-size du parent a une taille décrite comme une augmentation ou une diminution, le <=> changera également dans l'enfant.

Answer 3

CSS a vraiment besoin de cette fonctionnalité. Spécifier plusieurs classes au niveau de l’élément est bien, mais ce n’est pas la même chose que de pouvoir y aller:

.my_class { class:my_global_class; }

Le fait d’avoir une classe qui utilise les styles d’une autre classe serait très puissant. Cela déplacerait cette partie du modèle d'héritage dans le CSS où il appartient, en laissant un balisage moins encombré.

Je travaille actuellement sur un site dans lequel nous avons de nombreuses combinaisons de polices. Certaines balises h et p ont une apparence différente selon leur page et leur contexte. Il est très pénible d’avoir notre liste de polices car la famille de polices doit exister dans toutes les classes où nous en avons besoin. J'aimerais pouvoir faire ceci:

/* defualt for p tags */
p { font-family:Times, Arial, Helvetica; }

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

.my-page1 p {class:arial;}
.my-page2 p {class:segoe;}

Dans ce qui précède, ma liste de polices existerait dans un emplacement central et je pourrais les appliquer où bon me semble, uniquement dans le fichier CSS. Si j'ai 100 balises p sur mon site, alors je dois ajouter un & Quot; classe & Quot; à chacun d'eux pour ces exceptions, ce qui peut être une douleur. Cela est particulièrement vrai lorsque plusieurs développeurs travaillent sur un même site.

Answer 4

D'après ce que vous décrivez, vous souhaitez que .element1 soit disponible et utilisable sur plusieurs pages, mais sur quelques pages exceptionnelles, vous souhaitez que les éléments implémentant la classe .element1 soient différents, dans votre exemple en gras.

La réponse qui vous a été donnée est certainement une approche et fonctionnera certainement. Vous pouvez également ajouter des CSS supplémentaires aux pages exceptionnelles.

Par exemple, vous pouvez avoir un fichier allpages.css inclus dans toutes les pages et contenant le code CSS:

.element1 {
    font-size: 14px;
}

Ensuite, vous pouvez avoir un fichier CSS séparé 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, elles sont fusionnées. En utilisant cette technique, vous n’aurez pas à modifier les valeurs de classe pour les éléments HTML.

Answer 5

Syntaxe similaire à celle utilisée dans http://lesscss.org/
J'espère que vous y trouverez du personnel utile