Yuri

I’m not quite sure what you mean by “inherit one two and three together” exactly but I’ll have a guess at what you mean.

If you set an element with three classes and there are conflicts within the classes. e.g if as you say you set the background colour for all three different classes then the normal rules of the cascade will apply and classes later in the html get priority.

so if you said:

.one{color:red}
.two {color:blue}
.three{color:green}

…class=”one two three” – then the text will be green

…..class=”two three one” – then the text will be red.

Its just the normal rules of the cascade and where there are conflicts with elements of all the same weight then the class that comes later in the html has priority.

I hope that’s what you were asking.:)

Thanks for the comments.

As you know JS isn’t my area but I wonder if Dean Edwards ie7 script doesn’t already address these issues.

http://dean.edwards.name/IE7/compatibility/

Haven’t had time to check at the moment

Meanwhile, any work arounds for JS to suppose these as in obj.className? That would be a great find indeed.

I think you missed the point as the first example is not a list of links but an example of a four column layout as shown in the very last full demonstration. The first example was just a set up for the final demo. Therefore the example I gave is correct for its intended purpose.

Also thanks for pointing out the dot.notation addressing of classes which was in my article but seems to have been cut out of the edit in error. I will reproduce it below until the editor replaces it above

Paul
—————————————-
Without wishing to confuse too much
there is another technique of targetting these classes as follows (but there is a drawback so read on).

.fl.four.last {color:orange}

(Note that in the css there are no spaces between the selectors). The above would style .last only if the element contained the classes of .fl and .four as well (although they could be in any order and not just as shown e.g. <div class="four fl last">). However this technique is seldom used because IE6 and under have a bug and only recognise the
last selector when addressed this way and would style .last regardless. Therefore I would advise against this method of addressing the classes for the time being and use the simpler method of targeting as used in the main demo.
———————————

Your first example should be a list of links. No point using multiple classes if you’ve got unsemantic mark-up.

I use multiple classes on my lists very often. I add a class of ‘f’ and ‘l’ to the first and last list-items, respectively, for :first-child & :last-child emulation in Internet Explorer. I also add a class of ‘odd’ so I can do stripey tables/lists with ease. So often I end up with class=”f odd”.

Also, I should mention, selecting multiple classes in IE can give some unexpected results. For example .red.blue {color: purple;} IE will apply that to any element with JUST the blue class. The rule is, with multiple class CSS selectors, IE will apply the selector to an element with the last class.