CSS: More than one class

Is it possible to have a tag that belongs to more than one class?

Thanx

No - but it is possible for tags to inherit CSS properties from a parent tag in another class.

What is it you are trying to do?

I'm using this this javascript to make the item invisible, the HiddenItems class is:
.HiddenItems { VISIBILITY: Hidden; DISPLAY: none; }

I guess a better way to do this would be to the visibility and display in the javascript instead changing the class. The only problem with that is I don't know how I would access these properties using the ID. And I dont know what they should be set to when the item is visible. Any Ideas?

Code:

---

function Show(IDName)
{
document.getElementById(IDName).className = "";
}

function Hide(IDName)
{
document.getElementById(IDName).className = "HiddenItems";
}

---

Does it not show again when you run the show function?

BTW, I think this will edit the elements style attribute:

Code:

---

document.getElementById(IDName).style="VISIBILITY: Hidden; DISPLAY: none;"

---

That should work, mind if the element already had a class that applied a style to it would that remove it? Like if the style applied a font and color say when I used that to display it again would the text formatting been lost?

And any idea what the Visiblity & display properties should be to make it visible again? Or just removing them should make it visible again ?

Just tested it and I got a member not found error.

You can set individual styles as followis in javascript:

Code:

---

element.style.styleName = value

---

Where the element is a tag object and styleName is the name of the style you want to change. Stylwes such as font-color become fontColor in javascript.

So in you example you could do this:

Code:

---

function Show(IDName)
{
document.getElementById(IDName).style.visibility = "visible";
document.getElementById(IDName).style.display = "inline";
}

function Hide(IDName)
{
document.getElementById(IDName).style.visibility = "hidden";
document.getElementById(IDName).style.display = "none";
}

---

Thanx to both of you for your help. I actually changed it to this because using inline made it miss out white space when I tested it. :D:D

Code:

---

function Show(IDName)
{
document.getElementById(IDName).style.visibility = "visible";
document.getElementById(IDName).style.display = "";
}

function Hide(IDName)
{
document.getElementById(IDName).style.visibility = "hidden";
document.getElementById(IDName).style.display = "none";
}

---

It IS possible for a tag to belong to more than one class:
<div class="block hidden">
is entirely valid and makes the div belong to both the block and hidden classes.
Therefore, the rule
div.block {
}
will apply to it, as well as the rule
div.hidden {
}
The rule
div.block.hidden {
}
will indeed apply only to such divs.

Restrictions:
NS4 doesn't understand it. Tags with multiple classes belong to none in NS4's rendering.
IE (any version) doesn't properly understand the third selector above and will apply the rule to everything of the class hidden.