Peut une classe CSS hériter d'une ou plusieurs autres classes?

Je me sens stupide d'avoir été un programmeur web depuis si longtemps et de ne pas savoir la réponse à cette question, en fait j'espère que c'est possible et je ne le savais pas à propos plutôt que de ce que je pense est la réponse (qui est qu'il n'est pas possible).

Ma question est de savoir si il est possible de faire une classe CSS qui "hérite" d'une autre classe CSS (ou plus d'un).

Par exemple, de dire que nous avions:

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

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

.composite 
{
   .something;
   .else
}

où l' ".composite" de la classe à la fois d'affichage en ligne et ont un arrière-plan rouge

pense plus à propos de cascade plutôt que de l'héritage, il ne s'applique pas ici
Génial!! haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

InformationsquelleAutor Joel Martinez | 2009-06-30

css

406

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

Moins d'appels de ces "Mixin"

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;
}
```
On pourrait dire
```
/* LESS */
```
```
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}
```
- wow, MOINS c'est à peu près exactement à ce que je cherche ... c'est une honte qu'il n'est pas pris en charge nativement, et que c'est écrit en Ruby (je suis en utilisant ASP.NET MVC)
- Ouais, je suis dans le ASP.NET monde trop, donc je n'ai pas avancé dans mon flux de production.
- Moins est beau et tentant ... mais je n'ai pas réussi à l'utiliser avec CSSEdit dans le même flux de travail--donc je n'ai pas totalement adopté encore.
- Ouais MOINS est assez doux n'est-ce pas. Ive été effectivement de travailler sur un .Port NET ici: nlesscss.codeplex.com.
- dans le cas où vous avez atteint ce via google: le .Net port est maintenant ici
- Il y a été sans point pour un certain temps maintenant, qui apporte près de la prise en charge native (pense qu'il utilise jscript via com sous les couvertures)... je suis en utilisant une étape de post-construction pour compiler/fusionner/min mes ressources avec node.js dans une solution... il y a aussi la Crépitant extension pour VS.
- parfois je me demande pourquoi jQuery et d'autres choses comme de MOINS peuvent faire des choses CSS ne peut pas faire. allez, donnez da powa pour les devs w w n_n
- Magnifique!!! il supprime donc beaucoup de redondance, de CSS.
- Si vous êtes dans le ASP.NET monde, de regarder sur le Web des Outils de
- a un package Nuget pour cela. Il suffit d'ouvrir le gestionnaire de paquets de la console et de l'utilisation de cette ligne: PM> install-package dotless
- J'ai une question...sans MOINS faire #menu { .myfont; } est Ok ou pas? (CSS seul, sans additifs)
- Puis-je l'utiliser pour faire mes classes, qui "héritent" de Bootstrap classes, lorsque le Bootstrap classes ne sont pas compilés en MOINS?
- Je pense que c'est la meilleure réponse, mais le seul problème est que nous n'avons rien intégrées dans le CSS
InformationsquelleAutor Larsenal
289

Vous pouvez ajouter plusieurs classes à un seul élément du DOM, par exemple
```
<div class="firstClass secondClass thirdclass fourthclass"></div>
```
L'héritage n'est pas une partie de la CSS standard.
- savez-vous si la classe de l'emporter, le dernier ou le 1er et le comportement est-il de la croix-navigateur sécuritaire? Disons que nous avons .firstClass {font-size:12px;} .secondClass {font-size:20px;} sera alors définitive font-size être 12px ou 20px et est-ce de la croix-navigateur sécuritaire?
- La règle la plus grande spécificité sur le sélecteur va gagner. Standard de la spécificité des règles applicables; dans votre exemple, depuis la "première" et "deuxième" ont la même spécificité, la règle déclaré plus tard dans le CSS qui va gagner.
- J'aime l'idée d'utiliser pur CSS (au lieu de MOINS) pour résoudre ce problème.
- J'aime aussi l'idée de ne pas taper plusieurs classes à plusieurs reprises - Qui est O(n^2) travail 🙂
- Que faire si je suis à l'aide d'un tiers lib et souhaitez modifier la conception/HTML qu'il fournit, mais ne peut pas changer le intégré fichiers css dans cette lib ? Là j'aurais besoin d'une sorte d'héritage de classes css.
- c'est la bonne réponse
InformationsquelleAutor Matt Bridges
102

Oui, mais pas exactement avec cette syntaxe.
```
.composite,
.something { display:inline }

.composite,
.else      { background:red }
```
- Ce sucer, mais je suis heureux que nous avons au moins cette!
- Pourquoi ça craint? il semble très bon. Je ne comprends pas la différence entre la virgule et le symbole less.js solution.
- Parce que si le .quelque chose de et le .d'autre classes sont dans des fichiers différents et que vous ne pouvez pas les modifier, puis vous êtes coincé.
- C'était la bonne réponse, car elle a répondu à la question à l'aide de pure syntaxe CSS. La réponse de moins est bon à savoir, si.
- Cela devrait être l'exception réponse.
- L'autre inconvénient de cette solution, même si c'est assez agréable comme un puzzle solution que le trou du code CSS pourrait rapidement devenu difficile, car on ne peut pas organiser les classes logiquement par exemple, nous voulons .d'autre et .quelque chose de la définition de la place dans pas mal d'autres groupes de définitions de CSS.
InformationsquelleAutor mlouro
58

Garder votre commune attributs et attribuer spécifique (ou remplacer) les attributs de nouveau.
```
/*  ------------------------------------------------------------------------------ */   
/*  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;
}
```
- C'est très proche d'une solution idéale, j'espère que les gens ne les jetez pas juste parce qu'elle a peu de voix. En fait, l'une des questions les plus difficiles au sujet de "héritage CSS" est que vous obtenez habituellement déjà fait, d'énormes logiciel web (par exemple, un e-commerce ou un blog PHP célèbre logiciel) et ils emploient le code PHP que natif de ne pas ajouter de multiples classes d'éléments HTML ils outuput. Cela vous oblige à faire le tour et le désordre avec le code source (perdre les modifications si vous mettez à niveau plus tard) afin de rendre la sortie de ces additinal classes. Avec cette approche, au lieu de cela, vous ne jamais modifier le fichier CSS!
- C'est exactement ce que je cherchais. Vaut-il rien de cette même approche de travail avec les Sélecteurs CSS? Au lieu de spécifier h1, h2, etc vous pouvez spécifier .selector1, .selector2, .etc
InformationsquelleAutor user2990362
49

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 obtenir, malheureusement. Je serais ravi de voir cette fonction, ainsi que la classe alias un jour.

InformationsquelleAutor Sampson
41

Non vous ne pouvez pas faire quelque chose comme
```
.composite 
{
   .something;
   .else
}
```
Ce sont pas de "classe" noms dans le OO sens. .something et .else sont juste des sélecteurs rien de plus.

Mais vous pouvez spécifier deux classes sur un élément
```
<div class="something else">...</div>
```
ou vous pouvez 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ù les paragraphes backgroundcolor et la couleur sont héritées de l'paramètres dans la enfermant div qui est .foo de style. Vous pourriez avoir à vérifier l'exacte spécification du W3C. inherit est par défaut pour la plupart des propriétés de toute façon, mais pas pour tous.
- et oui, ce (première partie) a mon attente, lorsque j'ai d'abord entendu parler de CSS retour au 20e siècle... et nous n'avons pas encore, ils sont de la gravure sur la dynamique des choses, tout ce qui peut être statique composé juste avant la css s'appliquer, et il remplace le besoin de variables (statique "variables")
InformationsquelleAutor jitter
26

J'ai rencontré ce même problème et a fini à l'aide de JQuery solution pour le faire paraître comme une classe ne peut hériter d'autres classes.
```
<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>
```
Cela permettra de trouver tous les éléments avec la classe "composite" et d'ajouter les classes de "quelque chose" et "else" pour les éléments. Donc, quelque chose comme <div class="composite">...</div> finira comme suit:
<div class="composite something else">...</div>

InformationsquelleAutor DHoover
21

La SCSS façon que pour l'exemple donné, serait quelque chose comme:
```
.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}
```
Plus d'informations, consultez la sass bases
- Quelle est la valeur ajoutée par rapport à cela? .composite,.something { display:inline } et .composite,.else { background:red }
- Il est possible de réutiliser les définitions de .something et .else dans un autre des définitions de css.
InformationsquelleAutor Alter Lagos

Le meilleur que vous pouvez faire est de cette

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>

InformationsquelleAutor electricalbah

11

N'oubliez pas:
```
div.something.else {

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

}
```
- im ne cherche pas pour elle, mais c'était constructif pour moi n__n
InformationsquelleAutor Ryan Florence
8

Dans le fichier Css:
```
p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}
```
- Quelle sera donc la résultante font-size?
- La taille de la police serait 12px pour "p.Titre", car elle est définie après la première, dans le fichier. elle remplace la première taille de police.
- Est-ce à dire les déclarations doivent en fait être dans l'autre sens par rapport à ce qui est écrit dans cette réponse (au moins si nous voulons exemple, à titre indicatif)? Si le dernier définit l'emporte, la font-size: 16px ne peut pas prendre effet, à droite?
InformationsquelleAutor pedrofernandes
7

Un timing parfait: je suis allé à partir de cette question à mon email, pour trouver un article sur Moins, un Rubis de la bibliothèque qui, entre autres choses, fait ceci:

Depuis super ressemble à footer, mais avec une police différente, je vais utiliser le Moins de la classe d'inclusion technique (ils appellent ça un mixin) pour dire à ces déclarations trop:
```
#super {
  #footer;
  font-family: cursive;
}
```
- Juste quand je pensais que MOINS ne pouvais m'étonne pas du tout... je n'avais aucune idée vous pouvez importer mise en forme à partir d'un autre bloc comme ça. Bon conseil.
- très difficile pour l'analyse d'impact, parce que vous créer artificiellement des dépendances...
InformationsquelleAutor RichieHindle
7

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

Si le but est d'ajouter une seule classe, qui implique les propriétés de plusieurs classes à la fois, une solution native, je recommande l'utilisation de JavaScript/jQuery (jQuery n'est pas vraiment nécessaire, mais certainement utile)

Si vous avez, par exemple .umbrellaClass qui "hérite" de .baseClass1 et .baseClass2 vous pourriez avoir un peu de JavaScript que feux sur les prêts.
```
$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");
```
Maintenant tous les éléments de .umbrellaClass aurez toutes les propriétés des deux .baseClasss. Notez que, comme la programmation orientée objet, héritage, .umbrellaClass peut ou peut ne pas avoir ses propres propriétés.

Le seul inconvénient ici est de considérer qu'il y a des éléments créés dynamiquement à ne pas exister lorsque ce code se déclenche, mais il existe des moyens simples autour de cela.

Suce css n'a pas natif de l'héritage, si.
- Cette approche a déjà été suggéré dans @DHoover du répondre à partir de 2013.
- En effet, il a...
InformationsquelleAutor John Carrell
4

Malheureusement, le CSS ne fournit pas de "l'héritage" dans la façon que les langages de programmation comme C++, C# ou Java. Vous ne pouvez pas déclarer une classe CSS et ensuite de l'étendre avec une autre classe CSS.

Cependant, vous pouvez appliquer plus d'une seule classe à une balise dans votre balisage ... auquel cas il y a d'un ensemble complexe de règles qui déterminent réelle styles seront appliquées par le navigateur.
```
<span class="styleA styleB"> ... </span>
```
CSS va chercher tous les styles qui peuvent être appliquées sur la base de ce que votre balisage, et de mélanger les styles CSS à partir de ces multiples règles ensemble.

Généralement, les styles sont fusionnés, mais lorsque des conflits surviennent, au plus tard, a déclaré le style sera généralement gagner (à moins que le !important attribut est spécifié sur l'un des styles, dans lequel cas qui gagne). Aussi, des styles appliqués directement à un élément HTML priment classe CSS styles.

InformationsquelleAutor LBushkin
4

Il y a aussi SASS, que vous pouvez trouver à http://sass-lang.com/. Il y a un @étendre balise, ainsi que d'un mélange type de système. (Ruby)

C'est un concurrent de MOINS.

InformationsquelleAutor chug2k
3

Vous pouvez appliquer plus d'une classe CSS à un élément par quelque chose comme ceci class="autre chose"

InformationsquelleAutor Pete
3

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

Mais ce n'est pas vraiment le point. Je reçois votre question à propos de l'héritage. Le point réel est que l'héritage dans le CSS est fait pas par le biais de classes, mais par le biais de l'élément de hiérarchies. Donc, pour modèle hérité des traits que vous devez appliquer à différents niveaux d'éléments dans le DOM.
- Il est préférable de créer de l'héritage-comme des définitions de CSS au lieu d'utiliser toute la classe de composition en chaîne, voir mon post.
InformationsquelleAutor Assaf Lavie
3

Ce n'est pas possible en CSS.

La seule chose prise en charge dans le CSS est plus spécifique que l'autre règle:
```
span { display:inline }
span.myclass { background: red }
```
Une durée de avec la classe "maclasse" auront à la fois des propriétés.

Une autre façon est en spécifiant deux classes:
```
<div class="something else">...</div>
```
Le style de "else" volonté de remplacer (ou ajouter) le style de "quelque chose"
- Pour tous les styles dans 1 fichier il y a un héritage-comme solution en CSS, voir mon post.
InformationsquelleAutor Philippe Leybaert
2

Je cherchais qui comme un fou aussi et je viens de comprendre, en essayant différentes choses :P... eh Bien, vous pouvez le faire comme ça:
```
composite.something, composite.else
{
    blblalba
}
```
Soudain, elle a fonctionné pour moi 🙂

InformationsquelleAutor BiBi
2

Dans certains cas, vous pouvez faire un "soft" de l'héritage:
```
.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }
```
Cela ne fonctionne que si vous ajoutez l' .composite de classe à un élément d'enfant. Il est "soft" de l'héritage, parce que toutes les valeurs ne sont pas spécifiés dans .composite sont pas héréditaire, évidemment. Gardez à l'esprit, il serait encore moins de caractères pour écrire simplement "inline" et "rouge" au lieu de "hériter".

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

InformationsquelleAutor hydrix
1

En fait ce que vous demandez existe - toutefois, il est fait comme modules. Découvrez cette question sur Mieux CSS en .NET pour des exemples.

Découvrez Larsenal de réponse sur l'utilisation de MOINS pour avoir une idée de ce que ces add-ons de le faire.

InformationsquelleAutor Gavin Miller
1

CSS n'a pas vraiment d' ne ce que vous demandez. Si vous voulez écrire des règles qui composites idée à l'esprit, vous voudrez peut-être vérifier boussole. C'est un cadre de la feuille de style qui ressemble à celui déjà mentionné Moins.

Il vous permet de faire mixin et que toutes les bonnes affaires.
- Ajouter plus de détails ci-dessus, Boussole aka Sass via ne de Prolonger, d'Espaces réservés Mixin vs Étendre , des informations plus détaillées sur Espaces
InformationsquelleAutor Zack The Human
1

Pour ceux qui ne sont pas satisfaits avec le mentionné (excellent) messages, vous pouvez utiliser vos compétences en programmation pour créer une variable (PHP ou n'importe quel) et de stocker les multiples noms de classe.

C'est le meilleur hack, je pouvais venir.
```
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>
```
Puis appliquer la variable globale à l'élément que vous désirez plutôt que les noms de classe eux-mêmes
```
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
```
InformationsquelleAutor Shakir

Tout l'héritage direct n'est pas possible.

Il est possible d'utiliser une classe (ou id) pour une balise parent et ensuite utiliser les CSS combinators de modifier balise enfant le comportement de sa hiérarchie.

CSS:

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);}

HTML:

<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 dirais pas autant s'étend comme dans l'exemple, mais c'est juste une preuve de concept. Il y a encore de nombreux bugs qui peuvent survenir lorsque vous tentez d'appliquer le CSS de cette façon. (Par exemple modifier text-decoration types).

InformationsquelleAutor Stryderunknown

1

Moins et Sass sont CSS pré-processeurs qui s'étendent langage CSS dans des moyens. Juste l'une des nombreuses améliorations qu'ils offrent est juste l'option que vous cherchez. Il y a quelques très bonnes réponses, avec de moins en Moins et je vais ajouter de la Sass solution.

Sass a prolonger d'une option qui permet à une classe à être étendu à un autre. Plus au sujet de prolonger, vous pouvez lire dans cet article

InformationsquelleAutor Nesha Zoric
0

Si vous voulez un plus puissant texte de préprocesseur MOINS, découvrez PPWizard:

http://dennisbareis.com/ppwizard.htm

Attention le site est vraiment affreuse et il ya une petite courbe d'apprentissage, mais il est parfait pour la construction des CSS et le code HTML via des macros. Je n'ai jamais compris pourquoi plus web codeurs ne l'utilisez pas.
- Le site internet est vraiment affreuse.
- Un peu ironique sur un site web pour un processeur html!
- Oui, le site est horrible, mais c'est plus que juste cela. C'est dur à lire et me fait mal à la tête, trop!
- Une bonne chose qu'il est compatible avec windows 3.1 pour XP, lol
- Bizarre non-standard de l'outil, pas comme.
InformationsquelleAutor BloDoe

-5

Vous pouvez obtenir ce que vous voulez si vous prétraiter votre .les fichiers css grâce à php.
...

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

...

InformationsquelleAutor john

Vous devez vous connecter pour publier un commentaire.