class selectors with two different names

[mlogan78]

Hello all, long time reader of CSS Tricks but first time poster. I consider myself to be fairly knowledgable in CSS.HTML but by no means advanced so i am wanting to ask a question about a CSS related thing I have seen but don’t really understand what it’s purpose or use is.

When looking at the source code of some sites I can often see divs with class selectors that have 2 or more names seperated by a space e.g class=”red blue” or other html elements. I know that jquery and other scripting languages can dynamically add classes but I was wondering 1.Do designers name classes like this manually or is it mostly scripts and 2. What is the purpose or use of doing this and or benefits.

Thankyou.

[cybershot]

well, lets say that I have 3 divs that have a class name of box. The css for box define it’s size, shape and bakground color. so I end up with html like this

now I decide that inside that box I want text a certain color of text but that text color has already been defined with font, size, color and any other rule you can think of. maybe in my css the rule is .text, so now I can use that rule like this

sometimes it comes up that adding those text rules to the box class might affect other rules. So you do it this way.

[mlogan78]

Thanks cybershot, your explanation makes it easier for me to understand, I think I will have a practice at this technique and use it in my own projects. Can you do this with ID selectors also or is only class selectors?

Thanks

[cybershot]

you know, I don’t think you can, but I am not positive. you can try it and then run it through the validator to see what it says http://validator.w3.org/

[jamygolden]

You can do it with IDs, but it’s not seen as valid xHTML. So avoid ever do that :p

[sujiths777]

Can we give more than 2 clas name to a particulr element(say a div)….whats the max number?

[TT_Mark]

There is no max limit (I don’t think). I believe that some of the HTML5 JavaScript detection libraries assign multiple classes (about 20) to the basically defining what is/is not supported

[Author]

Posts