Defining styles for combinations of classes

Question

Is there a way to define styles for a combination of classes? For example, I'd like my HTML to look like this, but the output to render in the appropriate color:

<span class="red">Red Text</span><br/>
<span class="green">Green Text</span><br/>
<span class="red green">Yellow Text</span><br/>

Edit: The above seems to be confusing people when it was just an example; so here is another example:

<style>
    .style1 { background-color: #fff; }
    .style2 { background-color: #eee; }
    .style1.highlight { color: red; }
    .style2.highlight { color: blue; }
</style>

<ul>
    <li class="action style1">Do Action 1</li>
    <li class="action style2">Do Action 2</li>
    <li class="action style1 highlight">Do Action 1</li>
    <li class="action style2 highlight">Do Action 2</li>
</ul>

<script language="javascript" type="text/javascript">
$("li.action").bind("click", function(e) {
    e.preventDefault();

    // Do some stuff 

    $(this).addClass("highlight");
    $(this).unbind("click");
});
</script>

Again, this is just an example, so don't get hung up on alternating elements or anything like that. What I'm trying to avoid is having to duplicate the bind function for each different styleN or having to write an elseif structure that checks for each styleN class. Unfortunately this code doesn't work in IE 6 or 7 - the highlighted text for both .style1 and .style2 elements end up being blue.

Answer 1

You can select on multiple classes:

span.red.green { color: yellow; }

That will apply to any span element with red and green classes. Which may not be what you want, since it will also apply to, say:

<span class="red green blue">white</span>

Note that this doesn’t work right in IE 6.

Answer 2

maybe something like this

.red
{
color: red;
}

.red_green
{
color: #AS8324;
}

and you can use your html code

<span class="red">Red Text</span><br/>
<span class="green">Green Text</span><br/>
<span class="red_green">Yellow Text</span><br/>

I don't know this is what you exactly want but this is my approach. I hope it helps.

Answer 3

Sure.

.red { color: red; }
.green { color: green; }
.red.green { color: yellow; }

Answer 4

why do you want to do this? it may be possible, but i don't see the benefit. Would you also define class="short fat" and class="tall thin" or what about class="light dark"? Classes should be simple and specific for clarity and reuse. Multiple inheritance (fake or otherwise) should be avoided when it is unnecessary and potentially confusing.

class="red green"

is confusing

class="yellow"

is concise and clear

EDIT: i saw the second example, my advice remains unchanged. One class is concise and clear, two is potentially confusing. Assuming that this is supposed to work (and I think it is), expending great effort fighting bugs in the most popular browser (IE) is probably not worthwhile.

Answer 5

Here is my workaround:

<style>
    .style1 { background-color: #fff; }
    .style2 { background-color: #eee; }
    .style1 .highlight { color: red; }
    .style2 .highlight { color: blue; }
</style>

<ul>
    <li class="action style1"><span>Do Action 1</span></li>
    <li class="action style2"><span>Do Action 2</span></li>
    <li class="action style1"><span class="highlight">Do Action 1</span></li>
    <li class="action style2"><span class="highlight">Do Action 2</span></li>
</ul>

<script language="javascript" type="text/javascript">
$("li.action").bind("click", function(e) {
    e.preventDefault();

    // Do some stuff 

    $(this).children("span").addClass("highlight");
    $(this).unbind("click");
});
</script>

It's not as elegant as I'd hoped. It uses an extra element for each item; but at least it's fairly clean still.