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 en fait que c'est possible et que je ne le savais pas plutôt que ce que je pense être la réponse (c'est 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, supposons que nous ayons:
.something { display:inline }
.else { background:red }
Ce que j'aimerais faire est quelque chose comme ceci:
.composite
{
.something;
.else
}
où la classe ".composite" s'afficherait en ligne et aurait un arrière-plan rouge
Il existe des outils tels que LESS , qui vous permettent de composer du CSS à un niveau d'abstraction supérieur, similaire à ce que vous décrivez.
Moins d'appels 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;
}
Vous pourriez 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>
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 }
Conservez ensemble vos attributs communs et attribuez à nouveau des attributs spécifiques (ou remplacez-les).
/* ------------------------------------------------------------------------------ */
/* 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 près que vous allez malheureusement arriver. J'adorerais voir cette fonctionnalité, ainsi que des pseudonymes de classe un jour.
Non, vous ne pouvez pas faire quelque chose comme
.composite
{
.something;
.else
}
Ce ne sont pas des noms de "classe" au sens OO. .something et .else ne sont 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 regarder dans 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ù la couleur d'arrière-plan et la couleur des paragraphes sont héritées des paramètres du div englobant qui porte le style .foo. Vous devrez peut-être vérifier la spécification W3C exacte. inherit est la valeur par défaut pour la plupart des propriétés, mais pas pour toutes.
J'ai rencontré le même problème et 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>
Cela trouvera tous les éléments avec la classe "composite" et ajoutera les classes "quelque chose" et "else" aux éléments. Donc quelque chose comme <div class="composite">...</div> finira comme ceci:<div class="composite something else">...</div>
La manière SCSS pour l'exemple donné ressemblerait à ceci:
.something {
display: inline
}
.else {
background: red
}
.composite {
@extend .something;
@extend .else;
}
Plus d'infos, consultez le sass basics
Le mieux que vous puissiez faire est-ce
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'oublie pas:
div.something.else {
// will only style a div with both, not just one or the other
}
En 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 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, .umbrellaClass qui "hérite" de .baseClass1 et .baseClass2, vous pourriez avoir du JavaScript prêt à être utilisé.
$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");
Désormais, tous les éléments de .umbrellaClass auront toutes les propriétés de .baseClasss. Notez que, comme OOP héritage, .umbrellaClass peut avoir ou non ses propres propriétés.
La seule réserve à faire est de déterminer si des éléments créés de manière dynamique n'existeront pas lorsque ce code sera déclenché, mais il existe également des moyens simples de les éviter.
Sucks css n'a pas d'héritage natif, cependant.
Moment parfait : je suis passé de cette question à mon courrier électronique pour trouver un article sur Less , un Ruby bibliothèque qui, entre autres choses, fait ceci:
Depuis super ressemble à footer, mais avec une autre font, je vais utiliser la technique d'inclusion de classe de Less (ils l'appellent un mixin) pour lui dire d'inclure ces déclarations aussi:
#super {
#footer;
font-family: cursive;
}
Malheureusement, CSS ne fournit pas d'héritage comme le font les langages de programmation tels que 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 de votre balisage ... auquel cas, il existe un ensemble sophistiqué de règles qui déterminent quels styles seront appliqués par le navigateur.
<span class="styleA styleB"> ... </span>
CSS recherchera tous les styles pouvant être appliqués en fonction de votre balisage et combinera les styles CSS de ces règles multiples.
En règle générale, les styles sont fusionnés, mais en cas de conflit, le style déclaré le plus récent l'emporte (sauf si l'attribut! Important est spécifié sur l'un des styles, auquel cas celui-ci l'emporte). 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 à http://sass-lang.com/ . Il existe une balise @extend, ainsi qu'un système de type mixte. (Rubis)
C'est un peu un concurrent à MOINS.
Comme d'autres l'ont dit, vous pouvez ajouter plusieurs classes à un élément.
Mais ce n'est pas vraiment le point. Je comprends votre question sur l'héritage. Le vrai point est que l'héritage en CSS est fait pas à travers des classes, mais à travers 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.
Vous pouvez appliquer plusieurs classes CSS à un élément en utilisant quelque chose comme ceci: class = "quelque chose d'autre"
Ce n'est pas possible en CSS.
La seule chose supportée en CSS est plus spécifique qu'une autre règle:
span { display:inline }
span.myclass { background: red }
Une étendue avec la classe "myclass" aura les deux propriétés.
Une autre méthode consiste à spécifier deux classes:
<div class="something else">...</div>
Le style de "else" remplacera (ou ajoutera) le style de "quelque chose"
Dans des circonstances spécifiques, vous pouvez créer un héritage "logiciel":
.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 "souple" car les valeurs non spécifiées dans .composite ne sont pas héritées de manière évidente. 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 des propriétés et si elles le font automatiquement ou non: https://www.w3.org/TR/CSS21/propidx.html
Alors que l'héritage direct n'est 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 d'une balise enfant à 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 que l'exemple, mais c'est simplement une preuve de concept. De nombreux problèmes peuvent encore survenir lorsque vous essayez d'appliquer CSS de cette manière. (Par exemple, modification des types de décoration de texte).
Je cherchais ça aussi comme un fou et je l'ai juste compris en essayant différentes choses: P ... Tu peux le faire comme ça:
composite.something, composite.else
{
blblalba
}
Cela a soudainement fonctionné pour moi :)
Less et Sass sont des pré-processeurs CSS qui étendent le langage CSS de manière intéressante. Une des nombreuses améliorations qu’elles offrent n’est que l’option que vous recherchez. Il y a de très bonnes réponses avec Less et je vais ajouter la solution Sass.
Sass a l'option d'extension qui permet à une classe d'être complètement étendue à une autre. En savoir plus sur les extensions que vous pouvez lire dans cet article
En réalité, ce que vous demandez existe, mais il s’agit de modules complémentaires. Consultez cette question sur Better CSS in .NET pour des exemples.
Regardez 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 à l’esprit, vous pouvez vérifier compass . C'est un framework de feuille de style qui ressemble à Less.
Cela 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 demander de stocker plusieurs noms de classe.
C'est le meilleur bidouillage que j'ai pu trouver.
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<? define('DANGERTEXT','red bold'); ?>
Appliquez ensuite la variable globale à l'élément souhaité plutôt qu'aux noms de classe eux-mêmes.
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
Vous pouvez obtenir un comportement semblable à celui de l'héritage de cette manière:
.p,.c1,.c2{...}//parent styles
.c1{...}//child 1 styles
.c2{...}//child 2 styles
Voir http://jsfiddle.net/qj76455e/1/
Le principal 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 à l'aide d'un pré-processeur). Ainsi, toute demande de changement concernant CSS ne nécessite aucune analyse d'impact importante.
Jetez un oeil à 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 de réaction.
Si vous voulez un préprocesseur de texte plus puissant que LESS, consultez PPWizard:
http://dennisbareis.com/ppwizard.htm
Avertissement: le site Web est vraiment hideux et la courbe d'apprentissage est courte, mais il est parfait pour créer du code CSS et HTML via des macros. Je n'ai jamais compris pourquoi davantage de programmeurs Web ne l'utilisent pas.