Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple Classes 3

Status
Not open for further replies.

jimmyshoes

Programmer
Jun 1, 2008
132
GB
Is it ok to apply multiple styles to a div. For example
Code:
<div class="style1 style2">
Will behaviour be consistent across all browsers?
 
Yes you can, and possibly, depending on your CSS.

All modern browsers support multiple class names. However, IE6 (and possibly earlier) has a bug to do with incorrectly applying one class or another.

See my first post here for more details: thread215-1387166

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Yup, multiple class notation is fully supported by all modern browsers. The only thing you might not want to use is the css notation that requires both classes to be present
CSS:
.style1.style2 {
  color: red;
}
This will not be supported in IE6.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
I do this for layout as an example:

css:
Code:
.left { float: left; }
.right { float: right; }
.column { width: 365px; }

html:
Code:
<div class="column left">

Stole it from somewhere.
 
Having read the thread mentioned by BillyRayPreachersSon I've decided that I'll only be using one class per tag (ie class="important" even if this means that the 'important' definition may be very similar to another style 'quiteImportant' and some info will be repeated

If you use multiple styles for each tag then if you want to make a change you may have to start going through the html and altering each tag which would be very time consuming. I ony want to have to make changes to my stylesheet.

One question though, is it ok to have styles in 1 external style sheet that duplicate information. For example

Code:
.important{font-size:12px; color:#c00; font-weight:bold}
.quiteImportant{font-size:12px; color:#c00;}

or would the following be better
Code:
.quiteImportant{font-size:12px; color:#c00;}
.quiteImportant .important{font-weight:bold;}

and then...
<div class="quiteimportant"><div class="important">Text</div></div>

I'm thinking that I'd prefer
.important{font-size:12px; color:#c00; font-weight:bold}
.quiteImportant{font-size:12px; color:#c00;}
because it is easy to follow
 
I wouldn't steer clear of using multiple classes - just be aware that is can cause an issue in that specific case, and if that case arises, know how to work around it.

To answer your latest question, I would do neither. Why duplicate code if you don't need to. So, to that end, I would change this:

Code:
.important {
	font-size: 12px;
	color: #CC0000;
	font-weight:bold;
}

.quiteImportant {
	font-size: 12px;
	color: #CC0000;
}

to this:

Code:
.important,
.quiteImportant {
	font-size: 12px;
	color: #CC0000;
}

.important {
	font-weight:bold;
}

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Code:
.important {
    font-size: 12px;
    color: #CC0000;
}

.quite {
    font-weight:bold;
}

For fun, I like it this way so that it just cries out for multiple clases...

Code:
<div class="important"> some text</div>
<div class="quite important"> some other text</div>





 
I know it's a bit late (been on holiday) but you might also consider simply using the <strong> element in the above scenario. It is styled, by default as a bolded text and has a semantic meaning of more important text.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top