Topic: CSS Subclassing (div tag) (Page 1 of 1)

Okay... I'm pretty new to the whole CSS thing.

I'd like to create 2 div tag classes, one for displaying units (right justified, with some margin) and one for displaying characters (left justified, with some margin).
I then need to be able to assign an ID to seperate instances of each, so as an example, with the units div tag: a units "in stock", a units "back order", a units "available", and so on...

With that said, is following correct:
div.units { }
div.units.backorder { }
div.units.instock { }
div.units.available { }

I'm thinking not... I'm thinking that the use of the : "colon" should appear somewhere.

Thanks!

Karl

Karl: You are probably complicating matters for yourself here:

div.units { }

div.unitsBackorder { }

div.unitsInstock { }

div.unitsAvailable { }

and if you have common styles separat them and have it like:

div.units, div.unitsBackorder, div.unitsInstock, div.unitsAvailable { }

Or I've misunderstood the question - in which case I'll try again!!

[edit: Oh and I tend not to bother putting things like div.units as .units will do and I'm aware of no extra benefits of doing it the long way]

___________________
Emps

FAQs: Emperor

[the long way]

Well, can't you do the following:

.myClass {}
table.myClass { }
div.myClass { }

Where each of the classes "myClass" belongs to the object listed, and .myClass alone is a global definnition of "myClass"?

Karl

The answer to your original question:

Have a style sheet like this that has all the stuff specific to all divs with class "units":

divs.units {...}

Then have additional ones like this that carry the extra information for each type:

div.backorder {...}
div.instock {...}
div.available {...}

And then, in your html, just put divs like this:

<div class="units backorder">...</div>
<div class="units instock">...</div>
<div class="units available">...</div>

The class attribute is actually a space-separated list of all the classes you want to apply to an element.

That thing you said in the post before mine will work perfectly fine; the first style sheet will apply to anything with myClass set, and the other two will apply only to their types of HTML element with myClass set. However, don't use HTML element names to differentiate between classes; only use the HTML element names where they're necessary. (for instance, only use a <table> tag when you have a table.)

Excellent thread!

Say... is there a way to print this thread *printer friendly* (no joke intendid)... I'd like to save this one!

Karl

Hey, that's a good question! The answer at the moment is no, but I'm wondering why the Asylum doesn't have a print style sheet? Or maybe it does, I haven't checked.

Someone should ask the Doc. I'd be willing to make the style sheet if he wanted.

Hey wow, that would be cool, I'd appreciate that Slime, I don't *really* know where to start, I'm still "faking it" when it comes to CSS layouts, heh. I was fascinated with that nugget of info about the two class elements! Do you know of any issues in cross-browsers where that doesn't work? I'm going to start using that on my next project, you bet.

Your pal, -doc-

My thoughts exactly Doc. Very cool tidbit Slime....I never even thought about it.

I'll have to go read up now.

Heh, thanks. I only vaguely remember reading it myself somewhere in the w3c specs, undoubtedly within http://www.w3.org/TR/REC-CSS2 somewhere. I've never actually used more than one class per element, so I don't know about the cross-browser issues.

I'll see if I can put together a print style sheet for the thread view. It might be hard depending on how the page is structured with HTML, but I'll give it a shot.

In the meantime, be nice to me and go give me advice here =)

OK, advices given at that mentioned thread!

Your pal, -doc-