Is it possible to reference one CSS rule within another?
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
<div class="opacity radius">
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.
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.
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 <script> 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.