Hello, please sign in or register
You are here: Home

Multiple classes styling an element

Nodoubts this is something everyone else knew but i just discovered. The little fact that multiple CSS class'es can be used on a single markup.

e.g. The red text is the effects of the class .redtext, the yellow background is a product of .yellowbg, etc...

{{{#!html

content content content content

}}}
 

<style type="text/css">
.yellowbg{background-color:yellow;}
.redtext{color:red;}
.wide{padding:20px;margin:20px;}
</style>
<div class="yellowbg redtext wide">  content content content content  </div>

 

The effect of comma's (,) in markup

div.ex1 .yellow{
	color:yellow;
}

div.ex1 .red{
	color:red;
}

<div id="ex1" class="yellow, red"></div>

<div id="ex1" class="yellow red"></div>

<div id="ex1" class="red, yellow"></div>

<div id="ex1" class="red yellow"></div>

div.ex2 .red{
	color:red;
}

div.ex2 .yellow{
	color:yellow;
}

<div id="ex2" class="yellow, red"></div>

<div id="ex2" class="yellow red"></div>

<div id="ex2" class="red, yellow"></div>

<div id="ex2" class="red yellow"></div>

div.ex3 .red{
	color:red;
}
div.ex3 .yellow{
	color:yellow;
}
div.ex3 .red.yellow{
	color:green;
}
div.ex3 .yellow.red{
	color:orange;
}

<div id="ex3" class="yellow, red"></div>

<div id="ex3" class="yellow red"></div>

<div id="ex3" class="red, yellow"></div>

<div id="ex3" class="red yellow"></div>

Comments

Title*
Comment

Prove you are not a robot

To prove you are not a robot, please type in the six character code you see in the picture below
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share