How do I create a CSS class Union?

I have a div that unions CSS classes as such:

    <div id="tp" class="ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
        ...
    </div>

How do I create a CSS style that I can combine all of these classes together into a single class with a discreet name?开发者_运维知识库

example:

<div class="myCustomClass">
...
<div>

Where my custom class is an intersection of all of the combined classes? I can't seem to find an example or good explanation of how this is done.

Thanks in advance for reading my question!

AFAIK that's not possible in CSS. You can either feed rules to multiple selectors:

.one, .two, .three { color:red; }

Or manually add a generic class to every HTML element.

If you want to target elements that have certain classes you can do .one.two.three {}

You could try using something like LESS or SCSS to implement the re-useable elements of these classes in mixins. Note you dont have to use either of these in a ruby app; there are multiple ports of LESS in PHP, JavaScript and .NET and SCSS you can run stand alone (but will require ruby to run)

I think you're looking at the problem backwards. If all those classes have the same CSS rules associated with them, then you should just combine those rules in your stylesheet. However I think you'll ultimately find, as Jason McCreary comments, that will lead to less flexibility and more work.

It's likely that the classes listed in your example are from some UI framework, and elements further down the DOM tree are going to get styled depending on whether they're a descendent of an element with a particular class, ie. rules like this:

.ui-tablepicker td a {/* some style */}

But then there'll be other rules like this:

.ui-widget-content a {/*some other style*/}

If you want to combine these class names, you'll end up with something like this:

.myCustomClass1 a {/* Replaces case where only .ui-tablepicker parent exists */}
.myCustomClass1 td a {/* Replaces case where only .ui-tablepicker parent exists */}
.myCustomClass2 a {/* Replaces case where only .ui-widget-content parent exists */}
.myCustomClass2 td a {/* Replaces case where only .ui-widget-content parent exists */}
.myCustomClass3 a {/* Replaces case where both exist */}
.myCustomClass3 td a {/* Replaces case where both exist */}

It's the separation of class names which keeps the stylesheet manageable.

If typing all those classes in repeatedly is getting to you then use a variable to hold them in your page generation code, something like:

<?
$myCustomClass = "ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible";
?>
<div id="tp1" class="<? echo $myCustomClass; ?>">
    ...
<div id="tp2" class="<? echo $myCustomClass; ?>">