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

Je me sens bête d’avoir été un programmeur web depuis si longtemps et de ne pas connaître la réponse à cette question, j’espère que c’est possible et que je ne connaissais pas la réponse (ce qui est impossible) .

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 classes).

Par exemple, disons que nous avions:

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

Ce que j’aimerais faire, c’est quelque chose comme ça:

 .composite { .something; .else } 

où la classe “.composite” afficherait tous deux en ligne et aurait un fond rouge

Il existe des outils comme LESS , qui vous permettent de composer des CSS à un niveau d’abstraction plus élevé que celui 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 append plusieurs classes à un seul élément DOM, par exemple

 

L’inheritance ne fait pas partie du standard CSS.

Oui, mais pas exactement avec cette syntaxe.

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

Un élément peut prendre plusieurs classes:

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

I'm bold and verdana.

Et c’est à peu près la même chose que vous allez malheureusement obtenir. J’aimerais voir cette fonctionnalité, ainsi que les alias de classe un jour.

Conservez vos atsortingbuts communs et atsortingbuez à nouveau des atsortingbuts spécifiques (ou remplacés).

 /* ------------------------------------------------------------------------------ */ /* 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; } 

Non tu ne peux pas faire quelque chose comme

 .composite { .something; .else } 

Ce ne sont pas des noms de “classe” dans le sens OO. .something et .else sont que des sélecteurs.

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

 
...

ou vous pourriez regarder dans une autre forme d’inheritance

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

Hello, world

Où les paragraphes backgroundcolor et color sont hérités des parameters du div qui .foo le .foo . Vous devrez peut-être vérifier la spécification exacte du W3C. inherit est la valeur par défaut pour la plupart des propriétés, mais pas pour tous.

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

  

Cela va trouver tous les éléments avec la classe “composite” et append les classes “quelque chose” et “else” aux éléments. Donc quelque chose comme

...

finira comme ça:

...

La méthode SCSS pour l’exemple donné serait quelque chose comme:

 .something { display: inline } .else { background: red } .composite { @extend .something; @extend .else; } 

Plus d’infos, vérifiez les bases de sass

N’oubliez pas:

 div.something.else { // will only style a div with both, not just one or the other } 

Le mieux que vous puissiez faire est ceci

CSS

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

HTML

 

I'm bold and blue.

I'm bold and white.

Dans un fichier CSS:

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

Un timing parfait : je suis passé de cette question à mon email, pour trouver un article sur Less , une bibliothèque Ruby qui fait notamment cela:

Puisque super ressemble au 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; } 

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

Si l’intention est d’append 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, .umbrellaClass qui “hérite” de .baseClass1 et .baseClass2 vous pourriez avoir du JavaScript qui se déclenche sur prêt.

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

Maintenant, tous les éléments de .umbrellaClass auront toutes les propriétés des deux .baseClass . Notez que, comme pour l’inheritance de la POO, .umbrellaClass peut avoir ou non ses propres propriétés.

La seule mise en garde ici est de déterminer si des éléments créés dynamicment n’existent pas lorsque ce code est activé, mais il existe également des moyens simples.

Sucks css n’a cependant pas d’inheritance natif.

Malheureusement, CSS ne fournit pas d’inheritance 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 plus d’une classe à une balise dans votre balisage … Dans ce cas, il existe un ensemble sophistiqué de règles qui déterminent quels styles seront appliqués par le navigateur.

  ...  

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

Généralement, les styles sont fusionnés, mais lorsque des conflits surviennent, le style déclaré ultérieurement sera généralement gagnant (à moins que l’atsortingbut! Important ne soit spécifié sur l’un des styles, auquel cas il gagne). En outre, les styles appliqués directement à un élément HTML ont priorité sur les styles de classe CSS.

Vous pouvez appliquer plus d’une classe CSS à un élément par quelque chose comme cette classe = “quelque chose d’autre”

Comme d’autres l’ont déjà dit, vous pouvez append plusieurs classes à un élément.

Mais ce n’est pas vraiment le but. Je reçois votre question sur l’inheritance. Le vrai point est que l’inheritance dans CSS ne se fait pas par le biais de classes, mais par le biais de 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.

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 un peu un concurrent de MOINS.

Ce n’est pas possible en CSS.

La seule chose supscope dans CSS est d’être plus spécifique qu’une autre règle:

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

Une plage avec la classe “myclass” aura les deux propriétés.

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

 
...

Le style de “else” remplacera (ou appenda) le style de “quelque chose”

Je cherchais ça comme un fou et je me suis débrouillé pour essayer différentes choses: P … Eh bien, tu peux le faire comme ça:

 composite.something, composite.else { blblalba } 

Ça a soudainement fonctionné pour moi 🙂

En fait, ce que vous demandez existe – mais cela se fait en tant que modules complémentaires. Consultez cette question sur Better CSS in .NET pour des exemples.

Consultez la réponse de Larsenal sur l’utilisation de LESS pour avoir une idée de ce que font ces add-ons.

CSS ne fait pas vraiment ce que vous demandez. Si vous voulez écrire des règles avec cette idée composite en tête, vous pouvez vérifier la boussole . C’est un cadre de feuille de style qui ressemble à Less déjà mentionné.

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

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

C’est le meilleur hack que je pourrais trouver.

   

Appliquez ensuite la variable globale à l’élément que vous désirez plutôt que les noms de classe eux-mêmes

  Le Champion est Ici  

Dans des circonstances spécifiques, vous pouvez faire un inheritance “doux”:

 .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. C’est un inheritance “mou” car toutes les valeurs non spécifiées dans .composite ne sont pas héritées de toute évidence. Gardez à l’esprit qu’il serait toujours moins de caractères à écrire simplement “inline” et “red” au lieu de “inherit”.

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’inheritance direct ne soit pas possible.

Il est possible d’utiliser une classe (ou un identifiant) pour une balise parent, puis d’utiliser des combinateurs CSS pour modifier le comportement des balises enfants dans 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);} 
 

One possible solution is using multiple nested tags

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 ainsi adopter un comportement semblable à l’inheritance:

 .p,.c1,.c2{...}//parent styles .c1{...}//child 1 styles .c2{...}//child 2 styles 

Voir http://jsfiddle.net/qj76455e/1/

Le plus grand avantage de cette approche est la modularité – vous ne créez pas de dépendances entre les classes (comme vous le faites lorsque vous «héritez» d’une classe en utilisant un préprocesseur). Ainsi, toute demande de changement concernant le CSS ne nécessite aucune parsing d’impact importante.

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

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

Vous pouvez réaliser 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 '}';