Css Multiclassing Applying more than 1 class to an element

[sonesay 7]

There may be situations where you would like parts of a same style to be used through out your website but also need things a bit differently across certain elements. A combination of #ID and .Class selectors can usually do the job but there will be cases where a combination of of multiple classing would be better for the job.

 

To try and make this situation more clear for you to understand lets take a look at an example. We have a website that has many sections in it that we need consistent styling too. A news section, forms, portfolio items.. How we need the styling done for these 3 items is each will be contained within a border and have a background color fill.

 

we could solve this problem by using a combination of #ID and .Class selectors.

.news_container {border: solid 1px #aaaaaa;background-color: #eeeeee;width:80%;}.forms {border: solid 1px #aaaaaa;background-color: #eeeeee;width: 400px;}.item {border: solid 1px #aaaaaa;background-color: #eeeeee;width:300px;}#add_form{width:500px;color:0000ff;}#delete_form{width:500px;color:#ff0000;}

Here by using a combination we can control how our elements will get displayed to some extent without too much repeating code, But there is still repeating code across .news_container, .forms, .item with the background and border declaration's. Now if we wanted to change the color of the border and fill we could have to change it in 3 places. This may not be much of an issue if we didn't have too many sections but it can be annoying and a pain if you have to change it in 10 places if your site is very large.

 

Now you might think why not just create one class for the border and file style across multiple elements and apply it that and then use the ID to controls the widths. This would work if we only had 1 element of each so the using ID's would be valid. Remember we can only have 1 unique ID per element. As for our news and portfolio items there can be many so that wont work alone.

 

Here is where multi classing can help. You can break down what is consistent across your elements and give that a class of its own. In our example its the border and fill we want. Next identifiy what other classes you'll need again in our example its the news_container class with a width specific to news and a portfolio item class with its own width. We can then apply the base class of the element with the specific class to it(Multiclassing).

 

 

Heres the solution (Multiclassing)

.box{border: solid 1px #aaaaaa;background-color: #eeeeee;}.news_container {width:80%;}.forms {width: 400px;}.item {width:300px;}#add_form{width:500px;color:0000ff;}#delete_form{width:500px;color:#ff0000;}

We can use it in this fashion to address our problem

</div>

 

<div class='forms box'>

</div>

 

<div class='item box'>

</div>

 

linenums:0'><div class='news_container box'></div><div class='forms box'></div><div class='item box'></div>

Now all our elements are making use of the base class .box which has the consistent styling while also getting the specific styles associate with their kind of element. Now when you need to change the style of the border and fill you only have to do it in one place. This will help you cut down on your CSS code and make maintaining code much easier. The only thing you will need to do is think about what you need thats consistent across the different types of elements on your page and break them down into classes.

 

Note. You need spacing between classes.

 

I just learned this last night and cleaned up my own CSS code a bit with it. I hope it helps if you didn't know about it like I did.

 

Peace

Sone.

[who? 0]

As you discovered that recently (not so recently, but I'm adding this info anyway ), multiclassing follows a certain hierarchy. For example, if you define the same property in several classes and you apply those classes to an element, the value of that property to be applied will be the one defined in the last class on the class attribute.

 

In this Practical Example, we will use the "background-color" property defined over three different classes with three different values, and we'll apply those classes to the same element (in this case, a table cell):

CSS:

.bg_red {	background-color: #FF0000;}.bg_green {	background-color: #00FF00;}.bg_blue {	background-color: #0000FF;}

HMTL:

<table width="600px" border="0" cellspacing="0" cellpadding="0">  <tr>    <td width="150px" class="bg_red"><strong>Red</strong></td>    <td width="150px" class="bg_green"><strong>Green</strong></td>    <td width="150px" class="bg_blue"><strong>Blue</strong></td>    <td width="150px" class="bg_red bg_green bg_blue"><strong>All classes</strong></td>  </tr></table>

This will produce:

 

Or, if you want to see the whole HTML, download it here.

[jlhaslip 4]

Also worth noting, not all Browsers recognize mu;tiple classes. I believe the earlier IE fails to deals with them according to the Standards.