Is it possible to reference one CSS rule within another?

by

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).

<div class="opacity radius">

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.

More Related Contents:

  1. What is the difference between display: inline and display: inline-block?
  2. How do you easily horizontally center a using CSS? [duplicate]
  3. CSS selector based on element text? [duplicate]
  4. CSS @font-face not working with Firefox, but working with Chrome and IE
  5. Opacity of background-color, but not the text [duplicate]
  6. Footer at bottom of page or content, whichever is lower
  7. Formatting numbers (decimal places, thousands separators, localization, etc) with CSS
  8. How to write a CSS hack for IE 11? [duplicate]
  9. How can I get a Bootstrap column to span multiple rows?
  10. Get Two Columns with different background colours that extend to screen edge [duplicate]
  11. Is there a way to use SVG as content in a pseudo element ::before or ::after
  12. Can I remove the URL from my print css, so the web address doesn’t print?
  13. CSS to make an empty cell’s border appear?
  14. Style child element when hover on parent
  15. CSS @font-face – what does “src: local(‘☺’)” mean?
  16. How to hide scrollbar in Firefox?
  17. How to auto adjust the height according to content in it?
  18. What is the difference between block and inline-block with width: 100%?
  19. Icon fonts not loading in IE11
  20. Center Oversized Image in Div
  21. Print Background colours in Chrome
  22. Font weight turns lighter on Mac/Safari
  23. CSS Equivalent of the “if” statement
  24. Switching CSS classes based on screen size
  25. CSS3 3D Transform doesn’t work on IE11
  26. IE not rendering CSS properly when the site is located at networkdrive
  27. Vertically align Bootstrap badge inside heading
  28. CSS Floating Divs with different height are aligned with space between them
  29. Media Queries – Mobile vs Desktop Browser
  30. Dynamically updating css in Angular 2

Leave a Comment