id seems to work same as class

[mattyj]

After reading more about XHTML Syntax Rules at w3schools.com I discovered that:

"The id attribute replaces the name attribute"

<img src="picture.gif" name="picture1" /> (old-html)
<img src="picture.gif" id="picture1" /> (new-xhtml)

I'm not sure what a use for the name is, I've never used it in my work to date as I'm not yet programmer-savvy.

What I really want to know is I am modelling my homepage on the layout template from Cross-Browser.com (see Kevin Yanks css article on multi-column layout) at:

http://cross-browser.com/x/examples/layout2.html

this (template) uses id's, ie ..

<div id="centerColumn">
<div id="centerColumnContent">

..which seem to work the same as css classes. Back in the css sheet a hash (#) is used instead of a period (.) for the id/class. Are the id and class one and the same? in other words can I officially put in my css page:

#specialcolumn {
width: 760px;
background-color: #000000;
}

and then put in my xhtml page:

<div id="specialcolumn">content</div>

rather than:

.specialcolumn {
width: 760px;
background-color: #000000;
}

<div class="specialcolumn">content</div>


I've done it to a number of web page elements and the ID method seems to work just as if 'class' is used.

The Cross-Browser template works with a Javascript to make columns line up in the multicolumn layout, hence I think the use of the 'ID' rather than class for the divs so they're recognised. But it's raised this question for me as to whether this is an enhancement of XHTML because I'm migrating (migraining).

[ronaldb66]

In (X)HTML, an id must occur no more than once in a page, uniquely identifying one single element. A class can be used for any number of elements, and for different elements at that.

In a CSS selector, using an id value has greater weight than using a class value; therefore, styles selected using an id will outweigh those selected using a class when applying to the same element.

[ClevaTreva]

Hi

An id is for one container per page. If you want to use the style more than once, use class.

Name is also used by IE for anchors (I think), so moving to id alone can cause problems if you want to use anchors. I have a feeeling that it makes java a little more complicated in addressing elements on the page.

However, id styling has more importance than class styling. So it can be useful in providing localised styling to a tag. If you have a class with a font color specified, say, and applied this to a number divs, the divs would all have the same font color. Say there was a lot of styling in that style, then they would all get it.

Now, on ONE of those divs you wanted a different font color, but the rest of the styling the same, if the div has an id, you can set the more important font color there, by putting both an id and class in the same div tag.




Trevor

[megamanXplosion]

ID = Identification. Just like the ID in your wallet, it's unique to you. In XHTML, the ID must be unique to the owner.

Class = Group. Just like classes in school, it's a group of objects. In XHTML, the class can be a group of objects.

It's that simple.

[vgarcia]

Name is also used by IE for anchors (I think), so moving to id alone can cause problems if you want to use anchors. I have a feeeling that it makes java a little more complicated in addressing elements on the page.

IE uses id for anchors just fine, just like Opera, Mozilla, etc. can still use name for anchors. I believe it was really old versions of IE and Netscape that only used name. In any case, both name and id are allowed under XHTML 1.0 Transitional, so use both if needed:

<a name="books" id="books">books</a>

[mattyj]

Thanks all very much, I wasn't sure if ID could be used for styles or if it's best left alone. From what I can see it can be used for styling purposes and along with classes in the same tag if necessary.

[ronaldb66]

Using ids in CSS selectors makes it possible to very directly target elements that are decendant of the element that has the id. Typically, a page would be divided up into a number of divs, all representing specific sections of the page, like "header", "menu", "content", "footer", etc.
Giving each div an id, using these ids in CSS selectors you can specifically target elements that are in these divs.

I cooked up a simple example to illustrate this:

CSS:

#special {
border: 1px dashed #999;
}
#special p {
color: #c00;
}
.normal {
color: #090;
}
p {
color: #00c;
}

HTML:

<div id="special">
  <p class="normal">Is this text green?</p>
  <p>This text should be red, anyway</p>
</div>
<div>
  <p class="normal">This text is definitely green</p>
  <p>This text is blue, with a <span class="normal">green bit</span> I guess</p>
</div>

The text color of the first paragraph in the "special" div is not green but red, since the "#special p" selector overrides the ".normal" class selector; the second p is red because of that same "#special p" selector.

In the second div, the first paragraph is green because of the class; the second p is blue, apart from the spanned bit which has the same (green) class as the first p.

[blufive]

As a further variation: elements can have more than one class. For example, CSS:

.bigtext { font-size: 2em; }
 .red {color: red}

HTML

<p class="bigtext">big text!</p>
 <p class="red">red text!</p>
 <p class="red bigtext">red big text!</p>

[fillup07]

As a further variation: elements can have more than one class. For example, CSS:
Code:


.bigtext { font-size: 2em; }
.red {color: red}HTML
HTML:


<p class="bigtext">big text!</p>
<p class="red">red text!</p>
<p class="red bigtext">red big text!</p>

That is one thing I never knew. Are they just supposed to be separated by spaces, or commas, or what?

[ClevaTreva]

Hi

Spaces. The last one gets the importance in application (i.e. overrides the earlier ones, just like in a style sheet, except if you use the !important attribute).





Trevor