Une classe CSS peut-elle hériter d'une ou plusieurs autres classes?

Je me sens stupide d'avoir été programmeur Web pendant si longtemps et de ne pas connaître la réponse à cette question, j'espère que c'est possible et je ne savais tout simplement pas ce que je pense être la réponse (c'est-à-dire que ce n'est pas possible) .

Ma question est de savoir s'il est possible de créer une classe CSS qui "hérite" d'une autre classe CSS (ou de plusieurs).

Par exemple, disons que nous avions:

.something { display:inline }
.else      { background:red }

Ce que j'aimerais faire, c'est quelque chose comme ceci:

.composite 
{
   .something;
   .else
}

où la classe ".composite" serait à la fois affichée en ligne et sur fond rouge

Il existe des outils comme LESS , qui vous permettent de composer du CSS à un niveau d'abstraction plus élevé similaire à ce que vous décrivez.

Moins appelle ces "Mixins"

Au lieu de

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Tu pourrais dire

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Vous pouvez ajouter plusieurs classes à un seul élément DOM, par exemple

<div class="firstClass secondClass thirdclass fourthclass"></div>

Les règles données dans des classes ultérieures (ou qui sont plus spécifiques) sont prioritaires. Donc, fourthclassdans ce type d'exemple, cela prévaut.

L'héritage ne fait pas partie de la norme CSS.

Oui, mais pas exactement avec cette syntaxe.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Gardez ensemble vos attributs communs et attribuez à nouveau des attributs spécifiques (ou redéfinis).

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

Un élément peut prendre plusieurs classes:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

Et c'est à peu près aussi proche que vous allez l'obtenir malheureusement. J'adorerais voir cette fonctionnalité, ainsi que les alias de classe un jour.

Non, tu ne peux pas faire quelque chose comme

.composite 
{
   .something;
   .else
}

Ce ne sont pas des noms de "classe" au sens OO. .somethinget ne .elsesont que des sélecteurs rien de plus.

Mais vous pouvez soit spécifier deux classes sur un élément

<div class="something else">...</div>

ou vous pourriez envisager une autre forme d'héritage

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

Où les paragraphes backgroundcolor et color sont hérités des paramètres de la div englobante qui est .foostylisée. Vous devrez peut-être vérifier la spécification exacte du W3C. inheritest par défaut pour la plupart des propriétés de toute façon mais pas pour tous.

J'ai rencontré ce même problème et j'ai fini par utiliser une solution JQuery pour donner l'impression qu'une classe peut hériter d'autres classes.

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

Ceci trouvera tous les éléments avec la classe "composite" et ajoutera les classes "quelque chose" et "else" aux éléments. Donc, quelque chose comme ça <div class="composite">...</div>finira comme ça:
<div class="composite something else">...</div>

La manière SCSS pour l'exemple donné serait quelque chose comme:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

Plus d'informations, consultez les bases de sass

Le mieux que vous puissiez faire est

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

N'oubliez pas:

div.something.else {

    // will only style a div with both, not just one or the other

}

Dans le fichier Css:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Je me rends compte que cette question est maintenant très ancienne mais, ici ça ne va rien!

Si l'intention est d'ajouter une seule classe qui implique les propriétés de plusieurs classes, en tant que solution native, je recommanderais d'utiliser JavaScript / jQuery (jQuery n'est vraiment pas nécessaire mais certainement utile)

Si vous avez, par exemple, .umbrellaClassqui "hérite" de .baseClass1et .baseClass2vous pourriez avoir du JavaScript qui se déclenche.

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

Maintenant, tous les éléments de .umbrellaClassauront toutes les propriétés des deux .baseClasss. Notez que, comme l'héritage OOP, .umbrellaClasspeut ou peut ne pas avoir ses propres propriétés.

La seule mise en garde ici consiste à déterminer s'il existe des éléments créés dynamiquement qui n'existeront pas lorsque ce code se déclenchera, mais il existe également des moyens simples de contourner cela.

Sucks css n'a pas d'héritage natif, cependant.

Un timing parfait : je suis passé de cette question à mon email, pour trouver un article sur Less , une librairie Ruby qui fait entre autres:

Puisque super ressemble à footer, mais avec une police différente, j'utiliserai la technique d'inclusion de classe de Less (ils l'appellent un mixin) pour lui dire d'inclure également ces déclarations:

#super {
  #footer;
  font-family: cursive;
}

Malheureusement, CSS ne fournit pas d'héritage comme le font les langages de programmation comme C ++, C # ou Java. Vous ne pouvez pas déclarer une classe CSS puis l'étendre avec une autre classe CSS.

Cependant, vous pouvez appliquer plusieurs classes à une balise de votre balisage ... auquel cas il existe un ensemble sophistiqué de règles qui déterminent les styles réels qui seront appliqués par le navigateur.

<span class="styleA styleB"> ... </span>

CSS recherchera tous les styles qui peuvent être appliqués en fonction de votre balisage et combinera les styles CSS de ces multiples règles ensemble.

En règle générale, les styles sont fusionnés, mais lorsque des conflits surviennent, le style déclaré plus tard l'emporte généralement (sauf si l'attribut! Important est spécifié sur l'un des styles, auquel cas il gagne). De plus, les styles appliqués directement à un élément HTML ont priorité sur les styles de classe CSS.

Il y a aussi SASS, que vous pouvez trouver sur http://sass-lang.com/ . Il y a une balise @extend, ainsi qu'un système de type mix-in. (Rubis)

C'est une sorte de concurrent de LESS.

Ce n'est pas possible en CSS.

La seule chose prise en charge en CSS est plus spécifique qu'une autre règle:

span { display:inline }
span.myclass { background: red }

Un span avec la classe "myclass" aura les deux propriétés.

Une autre façon consiste à spécifier deux classes:

<div class="something else">...</div>

Le style de "else" remplacera (ou ajoutera) le style de "quelque chose"

Vous pouvez appliquer plusieurs classes CSS à un élément par quelque chose comme ceci class = "else else"

Comme d'autres l'ont dit, vous pouvez ajouter plusieurs classes à un élément.

Mais ce n'est pas vraiment le point. J'ai votre question sur l'héritage. Le vrai point est que l'héritage en CSS ne se fait pas via des classes, mais via des hiérarchies d'éléments. Donc, pour modéliser les traits hérités, vous devez les appliquer à différents niveaux d'éléments dans le DOM.

Je cherchais ça comme un fou aussi et je l'ai compris en essayant différentes choses: P ... Eh bien, vous pouvez le faire comme ça:

composite.something, composite.else
{
    blblalba
}

Cela a soudainement fonctionné pour moi :)

Dans des circonstances spécifiques, vous pouvez faire un héritage "soft":

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

Cela ne fonctionne que si vous ajoutez la classe .composite à un élément enfant. Il s'agit d'un héritage "doux" car toutes les valeurs non spécifiées dans .composite ne sont évidemment pas héritées. Gardez à l'esprit qu'il serait toujours moins de caractères d'écrire simplement "en ligne" et "rouge" au lieu de "hériter".

Voici une liste de propriétés et si elles le font automatiquement ou non: https://www.w3.org/TR/CSS21/propidx.html

Bien que l'héritage direct ne soit pas possible.

Il est possible d'utiliser une classe (ou id) pour une balise parent, puis d'utiliser des combinateurs CSS pour modifier le comportement des balises enfants à partir de sa hiérarchie.

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

Je ne suggérerais pas d'utiliser autant de portées comme l'exemple, mais ce n'est qu'une preuve de concept. De nombreux bogues peuvent encore survenir lors de la tentative d'application de CSS de cette manière. (Par exemple, modification des types de décoration de texte).

Less et Sass sont des pré-processeurs CSS qui étendent le langage CSS de manière précieuse. L'une des nombreuses améliorations qu'ils offrent n'est que l'option que vous recherchez. Il y a de très bonnes réponses avec Less et j'ajouterai la solution Sass.

Sass a une option d'extension qui permet à une classe d'être entièrement étendue à une autre. En savoir plus sur l'extension, vous pouvez lire dans cet article

En fait, ce que vous demandez existe - mais cela se fait sous forme de modules complémentaires. Consultez cette question sur Better CSS dans .NET pour des exemples.

Découvrez la réponse de Larsenal sur l'utilisation de LESS pour avoir une idée de ce que font ces modules complémentaires.

CSS ne fait pas vraiment ce que vous demandez. Si vous voulez écrire des règles avec cette idée composite à l'esprit, vous voudrez peut-être consulter la boussole . C'est un cadre de feuille de style qui ressemble au Less déjà mentionné.

Il vous permet de faire des mixins et toutes ces bonnes affaires.

Pour ceux qui ne sont pas satisfaits des (excellents) articles mentionnés, vous pouvez utiliser vos compétences en programmation pour créer une variable (PHP ou autre) et lui faire stocker les noms de plusieurs classes.

C'est le meilleur hack que j'ai pu trouver.

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

Ensuite, appliquez la variable globale à l'élément que vous désirez plutôt qu'aux noms de classe eux-mêmes

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Jetez un œil à CSS compose : https://bambielli.com/til/2017-08-11-css-modules-composes/

selon eux:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

Je l'utilise dans mon projet React.

Ne pensez pas aux classes CSS comme des classes orientées objet, pensez-y simplement comme un outil parmi d'autres sélecteurs pour spécifier les classes d'attributs par lesquelles un élément html est stylisé. Considérez tout entre les accolades comme la classe d'attributs , et les sélecteurs sur le côté gauche indiquent aux éléments qu'ils sélectionnent pour hériter des attributs de la classe d'attributs . Exemple:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

Lorsqu'un élément est donné l'attribut class="foo", il est utile de penser non pas comme héritant des attributs de la classe .foo, mais de classe attribut A et classe d'attributs B . C'est-à-dire que le graphe d'héritage a un niveau de profondeur, avec des éléments dérivés des classes d'attributs , et les sélecteurs spécifiant où vont les arêtes, et déterminant la priorité quand il y a des attributs concurrents (similaire à l'ordre de résolution des méthodes).

L'implication pratique pour la programmation est la suivante. Supposons que vous ayez la feuille de style indiquée ci-dessus et que vous souhaitiez ajouter une nouvelle classe .baz, où elle devrait avoir la même chose font-sizeque .foo. La solution naïve serait la suivante:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

Chaque fois que je dois taper quelque chose deux fois, je suis tellement en colère! Non seulement je dois écrire deux fois, maintenant je n'ai aucun moyen d'indiquer que programatically .fooet .bazdoit avoir la même font-size, et je l' ai créé une dépendance cachée! Mon paradigme ci-dessus suggère que je devrais extraire l' font-sizeattribut de la classe d'attributs A :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

La plainte principale ici est que maintenant je dois retaper chaque sélecteur de classe attribut A nouveau de préciser que les éléments qu'ils doivent sélectionner les attributs devraient hériter de la classe de base de l' attribut A . Pourtant, les alternatives sont de ne pas oublier de modifier chaque classe d'attributs où il y a des dépendances cachées à chaque fois que quelque chose change, ou d'utiliser un outil tiers. La première option fait rire Dieu, la seconde me donne envie de me tuer.

Si vous voulez un préprocesseur de texte plus puissant que LESS, consultez PPWizard:

http://dennisbareis.com/ppwizard.htm

Attention, le site Web est vraiment hideux et il y a une petite courbe d'apprentissage, mais il est parfait pour créer du code CSS et HTML via des macros. Je n'ai jamais compris pourquoi plus de codeurs Web ne l'utilisent pas.

Vous pouvez obtenir ce que vous voulez si vous prétraitez vos fichiers .css via php. ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...