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


Je me sens bête d'avoir été un programmeur web pendant si longtemps et ne sachant pas la réponse à cette question, j'espère en fait que c'est possible et je ne savais juste pas plutôt que ce que je pense être la réponse (ce qui est impossible) .

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

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 à la fois en ligne et aurait un arrière-plan rouge


619
2018-06-30 19:10


origine


Réponses:


Il y a des outils comme MOINS, ce qui vous permet de composer du CSS à un niveau d'abstraction supérieur à 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;
}

377
2018-06-30 19:18



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

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

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


254
2018-06-30 19:14



Oui, mais pas exactement avec cette syntaxe.

.composite,
.something { display:inline }

.composite,
.else      { background:red }

91
2017-11-28 18:30



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 en avoir malheureusement. J'aimerais voir cette fonctionnalité, avec des alias de classe un jour.


47
2018-06-30 19:12



Conservez vos attributs communs ensemble et affectez des attributs spécifiques (ou remplacent) à 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;
}

46
2017-11-14 03:09



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 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ù les paragraphes backgroundcolor et couleur sont hérités des paramètres de la div englobante qui est .foo stylé. Vous devrez peut-être vérifier la spécification W3C exacte. inherit est par défaut pour la plupart des propriétés de toute façon, mais pas pour tous.


38
2018-06-30 19:19



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>

Cela va trouver tous les éléments avec la classe "composite" et ajouter les classes "quelque chose" et "else" aux éléments. Donc quelque chose comme <div class="composite">...</div> va finir comme ça:
  <div class="composite something else">...</div>


24
2017-10-23 21:52



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

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

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

Plus d'infos, vérifiez le bases de sass


13
2018-03-31 19:24



Ne pas oublier:

div.something.else {

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

}

10
2018-06-30 19:48