Is it possible to reference one CSS rule within another

Question

For example if I have the following HTML    lt div class  someDiv  gt  lt  div gt    and this CSS    opacity       filter alpha opacity 60       -moz-opacity 0 6      -khtml-opacity  0 6      opacity  0 6      radius       border-top-left-radius  15px      border-top-right-radius  5px      -moz-border-radius-topleft  10px      -moz-border-radius-topright  10px          someDiv       background   000  height  50px  width  200px        How can I reference the opacity and radius classes here      so this div has those generic rules applied to it as well           Like how in scripting languages you have generic functions that are used often written at the top of the script and every time you need to use that function you simply call the function instead of repeating all the code every time

User · Answer

You can t unless you re using some kind of extended CSS such as SASS  However it is very reasonable to apply those two extra classes to  someDiv    If  someDiv is unique I would also choose to give it an id and referencing it in css using the id

User · Answer

If you re willing and able to employ a little jquery  you can simply do this       someDiv   css    radius     opacity       If you have a javascript that already processes the page or you can enclose it somewhere in  lt script gt  tags  If so  wrap the above in the document ready function     document  ready  function           someDiv   css    radius     opacity         I recently came across this while updating a wordpress plugin  The them has been changed which used a lot of   important  directives across the css  I had to use jquery to force my styles because of the genius decision to declare  important on several tags

User · Answer

You can easily do so with SASS pre-processor by using  extend   someDiv        extend  opacity       extend  radius      Ohterwise  you could use JavaScript  jQuery  as well      someDiv   addClass  opacity radius     The easiest is of course to add multiple classes right in the HTML   lt div class  opacity radius  gt

User · Answer

No  you cannot reference one rule-set from another   You can  however  reuse selectors on multiple rule-sets within a stylesheet and use multiple selectors on a single rule-set  by separating them with a comma      opacity   someDiv       filter alpha opacity 60       -moz-opacity 0 6      -khtml-opacity  0 6      opacity  0 6      radius   someDiv       border-top-left-radius  15px      border-top-right-radius  5px      -moz-border-radius-topleft  10px      -moz-border-radius-topright  10px          You can also apply multiple classes to a single HTML element  the class attribute takes a space separated list     lt div class  opacity radius  gt    Either of those approaches should solve your problem   It would probably help if you used class names that described why an element should be styled instead of how it should be styled  Leave the how in the stylesheet

User · Answer

Just add the classes to your html   lt div class  someDiv radius opacity  gt  lt  div gt

User · Answer

You can use var   function      The var   CSS function can be used to insert the value of a custom property  sometimes called a  CSS variable   instead of any part of a value of another property    Example    root     --main-bg-color  yellow      media  prefers-color-scheme  dark       root       --main-bg-color  black         body     background-color  var --main-bg-color

User · Answer

I had this problem yesterday   Quentin s answer is ok   No  you cannot reference one rule-set from another    but I made a javascript function to simulate inheritance in css  like  Net     x000D   x000D      var inherit array  x000D      var inherit  x000D      inherit array       x000D      Array from document styleSheets  forEach function  styleSheet i  index    x000D          Array from styleSheet i cssRules  forEach function  cssRule i  index    x000D              if  cssRule i style    null    x000D                  inherit   cssRule i style getPropertyValue  --inherits   trim    x000D                else   x000D                  inherit       x000D                x000D              if  inherit          x000D                  inherit array push   selector  cssRule i selectorText  inherit  inherit     x000D                x000D              x000D          x000D      Array from document styleSheets  forEach function  styleSheet i  index    x000D          Array from styleSheet i cssRules  forEach function  cssRule i  index    x000D              if  cssRule i selectorText    null    x000D                  inherit array forEach function  inherit i  index    x000D                      if  cssRule i selectorText split       includesMember inherit i inherit split           true    x000D                          cssRule i selectorText   cssRule i selectorText          inherit i selector  x000D                        x000D                      x000D                x000D              x000D          x000D   x000D   x000D     x000D   x000D  Array prototype includesMember   function  arr2    x000D      var arr1  x000D      var includes  x000D      arr1   this  x000D      includes   false  x000D      arr1 forEach function  arr1 i  index    x000D          if  arr2 includes arr1 i     true    x000D              includes   true  x000D            x000D          x000D      return includes  x000D    x000D   x000D   x000D    and equivalent css    x000D   x000D   test   x000D      background-color  yellow  x000D    x000D   x000D   productBox   imageBox   x000D      --inherits   test  x000D      display  inline-block  x000D    x000D   x000D   x000D    and equivalent HTML     x000D   x000D   lt div class  imageBox  gt  lt  div gt  x000D   x000D   x000D    I tested it and worked for me  even if rules are in different css files      Update  I found a bug in hierarchichal inheritance in this solution  and am solving the bug very soon

[css] Is it possible to reference one CSS rule within another?

Examples related to css