How to make inheritence in CSS?

Multi tool use
Multi tool use












1















I have the following problem:



I have a font with a given style in a css class:



.font_arial_36 {
font-family:Arial;
font-size:36px;
}


And now I have a css that gives me the size of a div in a given situation:



.a_div_test {
width:300px;
max-width:350px;
}


I want the a_div_test to have the properties of the font_arial_36, like an inheritance.



Somethin like (this is wrong just posting what I wanted):



.font_arial_36 {
font-family:Arial;
font-size:36px;
}

.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}


and now the .a_div_test should also have the font_arial_36 properties.



Is it possible with css?



PS: I do not want to add multiple classes to an Html Element like that:



<div class="font_arial_36 a_div_test"></div>


Because I should rewrite my code in many places where .a_div_test appear.










share|improve this question




















  • 3





    This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass

    – Ahmad Alfy
    Dec 31 '18 at 12:09











  • So this is not possible in css to have inheritence of classes?

    – felipe
    Dec 31 '18 at 12:33






  • 1





    In css, no. Indirectly, via css preprocessors like Sass, yes!

    – Yogee
    Dec 31 '18 at 12:50
















1















I have the following problem:



I have a font with a given style in a css class:



.font_arial_36 {
font-family:Arial;
font-size:36px;
}


And now I have a css that gives me the size of a div in a given situation:



.a_div_test {
width:300px;
max-width:350px;
}


I want the a_div_test to have the properties of the font_arial_36, like an inheritance.



Somethin like (this is wrong just posting what I wanted):



.font_arial_36 {
font-family:Arial;
font-size:36px;
}

.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}


and now the .a_div_test should also have the font_arial_36 properties.



Is it possible with css?



PS: I do not want to add multiple classes to an Html Element like that:



<div class="font_arial_36 a_div_test"></div>


Because I should rewrite my code in many places where .a_div_test appear.










share|improve this question




















  • 3





    This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass

    – Ahmad Alfy
    Dec 31 '18 at 12:09











  • So this is not possible in css to have inheritence of classes?

    – felipe
    Dec 31 '18 at 12:33






  • 1





    In css, no. Indirectly, via css preprocessors like Sass, yes!

    – Yogee
    Dec 31 '18 at 12:50














1












1








1








I have the following problem:



I have a font with a given style in a css class:



.font_arial_36 {
font-family:Arial;
font-size:36px;
}


And now I have a css that gives me the size of a div in a given situation:



.a_div_test {
width:300px;
max-width:350px;
}


I want the a_div_test to have the properties of the font_arial_36, like an inheritance.



Somethin like (this is wrong just posting what I wanted):



.font_arial_36 {
font-family:Arial;
font-size:36px;
}

.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}


and now the .a_div_test should also have the font_arial_36 properties.



Is it possible with css?



PS: I do not want to add multiple classes to an Html Element like that:



<div class="font_arial_36 a_div_test"></div>


Because I should rewrite my code in many places where .a_div_test appear.










share|improve this question
















I have the following problem:



I have a font with a given style in a css class:



.font_arial_36 {
font-family:Arial;
font-size:36px;
}


And now I have a css that gives me the size of a div in a given situation:



.a_div_test {
width:300px;
max-width:350px;
}


I want the a_div_test to have the properties of the font_arial_36, like an inheritance.



Somethin like (this is wrong just posting what I wanted):



.font_arial_36 {
font-family:Arial;
font-size:36px;
}

.a_div_test extends font_arial_36 {
width:300px;
max-width:350px;
}


and now the .a_div_test should also have the font_arial_36 properties.



Is it possible with css?



PS: I do not want to add multiple classes to an Html Element like that:



<div class="font_arial_36 a_div_test"></div>


Because I should rewrite my code in many places where .a_div_test appear.







css inheritance






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 31 '18 at 12:32







felipe

















asked Dec 31 '18 at 12:06









felipefelipe

6781619




6781619








  • 3





    This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass

    – Ahmad Alfy
    Dec 31 '18 at 12:09











  • So this is not possible in css to have inheritence of classes?

    – felipe
    Dec 31 '18 at 12:33






  • 1





    In css, no. Indirectly, via css preprocessors like Sass, yes!

    – Yogee
    Dec 31 '18 at 12:50














  • 3





    This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass

    – Ahmad Alfy
    Dec 31 '18 at 12:09











  • So this is not possible in css to have inheritence of classes?

    – felipe
    Dec 31 '18 at 12:33






  • 1





    In css, no. Indirectly, via css preprocessors like Sass, yes!

    – Yogee
    Dec 31 '18 at 12:50








3




3





This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass

– Ahmad Alfy
Dec 31 '18 at 12:09





This is not how inheritance work in CSS. You do that by having these 2 classes written on an HTML tag. What you are trying to do require CSS preprocessors like Less and Sass

– Ahmad Alfy
Dec 31 '18 at 12:09













So this is not possible in css to have inheritence of classes?

– felipe
Dec 31 '18 at 12:33





So this is not possible in css to have inheritence of classes?

– felipe
Dec 31 '18 at 12:33




1




1





In css, no. Indirectly, via css preprocessors like Sass, yes!

– Yogee
Dec 31 '18 at 12:50





In css, no. Indirectly, via css preprocessors like Sass, yes!

– Yogee
Dec 31 '18 at 12:50












5 Answers
5






active

oldest

votes


















3














This is not possible in CSS. What you do is you assign the 2 classes to the element you want.



<div class="font_arial_36 a_div_test"></div>





share|improve this answer


























  • I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

    – felipe
    Dec 31 '18 at 12:31



















1














CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.



That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.



That is, the inheritance is defined by the HTML structure, not the CSS itself.






share|improve this answer

































    0














    why you need to extend when you can add multiple classes with space on HTML element.



    <div class="font_arial_36 a_div_test">Like this</div>





    share|improve this answer































      0














      As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:



      <button class="uiButton disabledButton">Click Here</button>


      For below CSS:



      .uiButton {
      background-color: gray;
      color: lightgray;
      font-size: 20px;
      font-family: "Segoe UI", Helvetica, sans-serif;
      text-align: center;
      text-decoration: none;

      padding: 10px 10px;
      border:none;
      display: inline-block;
      margin: 5px 5px;
      cursor: pointer;
      }

      .disabledButton
      {
      background-color: gray;
      color: lightgray;
      cursor: not-allowed;
      }


      In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).



      But, there is a better way:



      Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide



      Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).






      share|improve this answer

































        0














        if you don't want to add multiple classes to html element then



        .font_arial_36, .a_div_test {
        font-family:Arial;
        font-size:36px;
        }

        .a_div_test {
        width:300px;
        max-width:350px;
        }


        other than this no other possible way seems to be there for inheritance in css, we have to use sass






        share|improve this answer

























          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987328%2fhow-to-make-inheritence-in-css%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          5 Answers
          5






          active

          oldest

          votes








          5 Answers
          5






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          3














          This is not possible in CSS. What you do is you assign the 2 classes to the element you want.



          <div class="font_arial_36 a_div_test"></div>





          share|improve this answer


























          • I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

            – felipe
            Dec 31 '18 at 12:31
















          3














          This is not possible in CSS. What you do is you assign the 2 classes to the element you want.



          <div class="font_arial_36 a_div_test"></div>





          share|improve this answer


























          • I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

            – felipe
            Dec 31 '18 at 12:31














          3












          3








          3







          This is not possible in CSS. What you do is you assign the 2 classes to the element you want.



          <div class="font_arial_36 a_div_test"></div>





          share|improve this answer















          This is not possible in CSS. What you do is you assign the 2 classes to the element you want.



          <div class="font_arial_36 a_div_test"></div>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Dec 31 '18 at 16:11









          sri harsha

          39829




          39829










          answered Dec 31 '18 at 12:09









          Igal S.Igal S.

          5,40731838




          5,40731838













          • I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

            – felipe
            Dec 31 '18 at 12:31



















          • I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

            – felipe
            Dec 31 '18 at 12:31

















          I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

          – felipe
          Dec 31 '18 at 12:31





          I knwo I could to it. but this is not like inheritence... I'll post on the questions thanks.

          – felipe
          Dec 31 '18 at 12:31













          1














          CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.



          That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.



          That is, the inheritance is defined by the HTML structure, not the CSS itself.






          share|improve this answer






























            1














            CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.



            That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.



            That is, the inheritance is defined by the HTML structure, not the CSS itself.






            share|improve this answer




























              1












              1








              1







              CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.



              That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.



              That is, the inheritance is defined by the HTML structure, not the CSS itself.






              share|improve this answer















              CSS stands for "Cascading Style Sheets". That means that a top-level element will cascade its styles to its child elements. As long as .a_div_test elements are contained within the subtree of elements of .font_arial_36, they will receive (inherit) all the styles from .font_arial_36.



              That's why you define a font-family inside the <body> tag if you want it to apply to all elements within the page.



              That is, the inheritance is defined by the HTML structure, not the CSS itself.







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Jan 4 at 15:16

























              answered Jan 4 at 12:08









              leuquimleuquim

              428414




              428414























                  0














                  why you need to extend when you can add multiple classes with space on HTML element.



                  <div class="font_arial_36 a_div_test">Like this</div>





                  share|improve this answer




























                    0














                    why you need to extend when you can add multiple classes with space on HTML element.



                    <div class="font_arial_36 a_div_test">Like this</div>





                    share|improve this answer


























                      0












                      0








                      0







                      why you need to extend when you can add multiple classes with space on HTML element.



                      <div class="font_arial_36 a_div_test">Like this</div>





                      share|improve this answer













                      why you need to extend when you can add multiple classes with space on HTML element.



                      <div class="font_arial_36 a_div_test">Like this</div>






                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Dec 31 '18 at 12:10









                      diEchodiEcho

                      37.7k26127201




                      37.7k26127201























                          0














                          As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:



                          <button class="uiButton disabledButton">Click Here</button>


                          For below CSS:



                          .uiButton {
                          background-color: gray;
                          color: lightgray;
                          font-size: 20px;
                          font-family: "Segoe UI", Helvetica, sans-serif;
                          text-align: center;
                          text-decoration: none;

                          padding: 10px 10px;
                          border:none;
                          display: inline-block;
                          margin: 5px 5px;
                          cursor: pointer;
                          }

                          .disabledButton
                          {
                          background-color: gray;
                          color: lightgray;
                          cursor: not-allowed;
                          }


                          In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).



                          But, there is a better way:



                          Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide



                          Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).






                          share|improve this answer






























                            0














                            As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:



                            <button class="uiButton disabledButton">Click Here</button>


                            For below CSS:



                            .uiButton {
                            background-color: gray;
                            color: lightgray;
                            font-size: 20px;
                            font-family: "Segoe UI", Helvetica, sans-serif;
                            text-align: center;
                            text-decoration: none;

                            padding: 10px 10px;
                            border:none;
                            display: inline-block;
                            margin: 5px 5px;
                            cursor: pointer;
                            }

                            .disabledButton
                            {
                            background-color: gray;
                            color: lightgray;
                            cursor: not-allowed;
                            }


                            In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).



                            But, there is a better way:



                            Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide



                            Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).






                            share|improve this answer




























                              0












                              0








                              0







                              As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:



                              <button class="uiButton disabledButton">Click Here</button>


                              For below CSS:



                              .uiButton {
                              background-color: gray;
                              color: lightgray;
                              font-size: 20px;
                              font-family: "Segoe UI", Helvetica, sans-serif;
                              text-align: center;
                              text-decoration: none;

                              padding: 10px 10px;
                              border:none;
                              display: inline-block;
                              margin: 5px 5px;
                              cursor: pointer;
                              }

                              .disabledButton
                              {
                              background-color: gray;
                              color: lightgray;
                              cursor: not-allowed;
                              }


                              In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).



                              But, there is a better way:



                              Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide



                              Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).






                              share|improve this answer















                              As suggested by others, there is no way you can inherit once CSS property into another. Only way is to add both the class to a DOM element to mimic the inheritance. Css solution:



                              <button class="uiButton disabledButton">Click Here</button>


                              For below CSS:



                              .uiButton {
                              background-color: gray;
                              color: lightgray;
                              font-size: 20px;
                              font-family: "Segoe UI", Helvetica, sans-serif;
                              text-align: center;
                              text-decoration: none;

                              padding: 10px 10px;
                              border:none;
                              display: inline-block;
                              margin: 5px 5px;
                              cursor: pointer;
                              }

                              .disabledButton
                              {
                              background-color: gray;
                              color: lightgray;
                              cursor: not-allowed;
                              }


                              In above: The Button is first styled with uiButton class and then disabledButton class. So whichever CSS class you write later in 'class' attribute, will overwrite properties of earlier one (in case if anything is common).



                              But, there is a better way:



                              Yes, if you are ready to use CSS pre-processors like https://sass-lang.com/guide



                              Note that Sass is a pre-processor. Meaning, Sass file (.scss) will be compiled into CSS (but chrome provides nice debugging for .scss i.e. Sass file). You can write plain CSS in the SCSS file and additionally use directives to achieve inheritance and much more. To make the life easier, there are some software which will automatically create css when scss file is modified (I know http://koala-app.com/ which does that).







                              share|improve this answer














                              share|improve this answer



                              share|improve this answer








                              edited Jan 2 at 4:28

























                              answered Dec 31 '18 at 12:45









                              YogeeYogee

                              1,0611018




                              1,0611018























                                  0














                                  if you don't want to add multiple classes to html element then



                                  .font_arial_36, .a_div_test {
                                  font-family:Arial;
                                  font-size:36px;
                                  }

                                  .a_div_test {
                                  width:300px;
                                  max-width:350px;
                                  }


                                  other than this no other possible way seems to be there for inheritance in css, we have to use sass






                                  share|improve this answer






























                                    0














                                    if you don't want to add multiple classes to html element then



                                    .font_arial_36, .a_div_test {
                                    font-family:Arial;
                                    font-size:36px;
                                    }

                                    .a_div_test {
                                    width:300px;
                                    max-width:350px;
                                    }


                                    other than this no other possible way seems to be there for inheritance in css, we have to use sass






                                    share|improve this answer




























                                      0












                                      0








                                      0







                                      if you don't want to add multiple classes to html element then



                                      .font_arial_36, .a_div_test {
                                      font-family:Arial;
                                      font-size:36px;
                                      }

                                      .a_div_test {
                                      width:300px;
                                      max-width:350px;
                                      }


                                      other than this no other possible way seems to be there for inheritance in css, we have to use sass






                                      share|improve this answer















                                      if you don't want to add multiple classes to html element then



                                      .font_arial_36, .a_div_test {
                                      font-family:Arial;
                                      font-size:36px;
                                      }

                                      .a_div_test {
                                      width:300px;
                                      max-width:350px;
                                      }


                                      other than this no other possible way seems to be there for inheritance in css, we have to use sass







                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited Jan 4 at 12:28

























                                      answered Dec 31 '18 at 12:15









                                      Sashi yadavSashi yadav

                                      305




                                      305






























                                          draft saved

                                          draft discarded




















































                                          Thanks for contributing an answer to Stack Overflow!


                                          • Please be sure to answer the question. Provide details and share your research!

                                          But avoid



                                          • Asking for help, clarification, or responding to other answers.

                                          • Making statements based on opinion; back them up with references or personal experience.


                                          To learn more, see our tips on writing great answers.




                                          draft saved


                                          draft discarded














                                          StackExchange.ready(
                                          function () {
                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987328%2fhow-to-make-inheritence-in-css%23new-answer', 'question_page');
                                          }
                                          );

                                          Post as a guest















                                          Required, but never shown





















































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown

































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown







                                          K4lKwE13uhuA5wBGSFz7Cxu1 pDPbyeW,YOS8 z9m,Bbuu8swFyqAiGVWqFkkc0s,jvFJBJh2A5e05q6 KGRl1ILNi 4
                                          AD84Cd,lcq6MfsE 7pZKELUIGurZZ IJHXbNTzzZP6h1HVA2Ng

                                          Popular posts from this blog

                                          Monofisismo

                                          Angular Downloading a file using contenturl with Basic Authentication

                                          Olmecas