Use Class or ID

[Chet]

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise?

I've been making a few sample tableless pages to learn css, but
I've gotten into the habit of using only class. In one of the
pages I made, I changed the unique div classes to id's and the
html file size only decreased 23 bytes and the css file decreased
a few bytes. Not much of a difference.

Is it just somewhat personal preference or something more valid?

Thanks in advance,
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)

[Barbara de Zoete]

Chet wrote:

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise?

In the cascade the properties that are described with an id have more
weight than the properties with a class. So the properties of the id
overrule those of the class if you apply them both to the same element.
For example:

style:
#content { color:black; }
..fancy { border:2px dotted orange; color:orange; }

html:
<div id="content" class="fancy">
<p>This text will still be black, but it does have a orange dotted
border.</p>
</div>

You can overrule the properties of the id again, by adding '!important'
for the properties of the class. So if the class of the example had been
..fancy { border:2px dotted orange; color:orange !important; } the text
of the paragraf would get rendered as orange too.

Secondly, in hyperlinks you can refer to an id by adding '#id_here' to
the end of the link. <a href="foo/bar.html#id_here"> makes the position
of the element with that id jump to the top right corner of the viewport
of the mainstream grafical browsers (that is, if there is enough content
underneath that point to fill the remaining height of the viewport up).
--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Richard]

Chet wrote:

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise? I've been making a few sample tableless pages to learn css, but
I've gotten into the habit of using only class. In one of the
pages I made, I changed the unique div classes to id's and the
html file size only decreased 23 bytes and the css file decreased
a few bytes. Not much of a difference. Is it just somewhat personal preference or something more valid? Thanks in advance,
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)

One circle says "use only one ID".
My circle says "BULLSHIT".
Both can be used as often as desired.
If there was a limit of use, then why does the page work with more than one?
It's purely a matter of preference.

http://www.htmlgoodies.com/beyond/classid.html

What About Those IDs?
The ID command works exactly the same way as the CLASS command. The
reason it exists is to allow you to incorporate these Style Sheet models
into JavaScript or DHTML. So, unless you are attempting to use these with
JavaScript, stick with the CLASS command. You can use the ID command, but it
won't do anything different or better than the CLASS command.

See also: http://css-discuss.incutio.com/?page=ClassesVsIds

I think it all boils down to whom you ask.

[Barbara de Zoete]

Richard wrote:

Chet wrote:

> I know that id's should only be used for a unique element on a
> page, but what is the difference of using class or id otherwise?

One circle says "use only one ID".
My circle says "BULLSHIT".

I dont remember any reference to a specification that says you can have
only one id on a page. I do know that you are supposed to use a unique
id only once on a page. It is afterall an /identifier/ and it is hard to
identify anything if it occurs more than once in the same page.
So:
- you can use a unique id only once on a page;
- you can use as many different id's on a page as you like;
- you can use a unique id on as many pages as you like, once on any of them.

Reference:
<http://www.w3.org/TR/2002/WD-CSS21-20020802/selector.html#id-selectors>
--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Barbara de Zoete]

Barbara de Zoete wrote:

Secondly, in hyperlinks you can refer to an id by adding '#id_here' to
the end of the link. <a href="foo/bar.html#id_here"> makes the position
of the element with that id jump to the top right corner of the viewport ^^^^^^^^^^^^^^^^
Sorry, should be 'top of the viewport'
of the mainstream grafical browsers (that is, if there is enough content
underneath that point to fill the remaining height of the viewport up).

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[David Dorward]

Chet wrote:

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise?

http://css-discuss.incutio.com/?page=ClassesVsIds
--
David Dorward <http://dorward.me.uk/>

[Neal]

On Thu, 26 Feb 2004 00:31:32 -0600, Richard <an*******@127.000> wrote:

One circle says "use only one ID".
My circle says "BULLSHIT".
Both can be used as often as desired.
If there was a limit of use, then why does the page work with more than
one?
It's purely a matter of preference.

ID's can be used as link endpoints, but only if they are unique on the
page. Otherwise, who knows which ID you'll end up on?

ID, as another poster mentioned, also outweighs class in the CSS. So there
are times ID is more useful than class - when you want to also link to a
position in a page, and when you want a style to outweight class styles.

[David Dorward]

Richard wrote:

One circle says "use only one ID".
My circle says "BULLSHIT".
Both can be used as often as desired.
If there was a limit of use, then why does the page work with more than
one?
Because browsers attempt to error correct for authors who are ignorant or
moronic. Different browsers are capable of different levels of error
correction. You shouldn't depend on the browser being able to cope with
crap because you don't know what browser the user is using.
http://www.htmlgoodies.com/beyond/classid.html

Evidence that you can be an idiot and still get a PhD.
--
David Dorward <http://dorward.me.uk/>

[Neal]

On Thu, 26 Feb 2004 08:06:02 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

I dont remember any reference to a specification that says you can have
only one id on a page.

Remember this...

http://www.w3.org/TR/html4/struct/global.html

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a
document.

This means that according to W3C recommendations, each ID name can be used
only once in a document. I can use the ID attribute as much as I like, but
each time I must have a unique ID name.

And in case of argument we can look at what comes next:

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element.
Any number of elements may be assigned the same class name or names.
Multiple class names must be separated by white space characters.

If ID names could be repeated in a page, there'd be no point in noting
that the same class name can be assigned to any number of elements.

[Barbara de Zoete]

Neal wrote:

On Thu, 26 Feb 2004 08:06:02 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

I dont remember any reference to a specification that says you can
have only one id on a page.
Remember this...

http://www.w3.org/TR/html4/struct/global.html

id = name [CS]
This attribute assigns a name to an element. This name must be unique in
a document.

Still, you can have as many id's in a page as you like, as long as each
is unique.
If ID names could be repeated in a page,

I don't see myself writing anywhere that one can repeat id's in a page.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Harlan Messinger]

"Chet" <ng******@NOcharterSPAM.net> wrote in message
news:10*************@corp.supernews.com...

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise?

Various IDs that I have are, depending on the context, "Harlan Messinger",
my Social Security number, and my driver's license number. I belong to a
number of classes, including the class of "men", the class of "Americans",
the class of "drivers", the class of "software developers". Use the id and
class attributes accordingly.

[Neal]

On Thu, 26 Feb 2004 09:23:22 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

Neal wrote:

On Thu, 26 Feb 2004 08:06:02 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

I dont remember any reference to a specification that says you can
have only one id on a page.

Remember this...

http://www.w3.org/TR/html4/struct/global.html

id = name [CS]
This attribute assigns a name to an element. This name must be unique
in a document.

Still, you can have as many id's in a page as you like, as long as each
is unique.

If ID names could be repeated in a page,

I don't see myself writing anywhere that one can repeat id's in a page.

Then were you saying that I can use the attribute "id" more than once with
different values? And why?

Making that statement didn't seem to make sense in context. Apologies if I
somehow misunderstood.

[Richard]

Neal wrote:

On Thu, 26 Feb 2004 08:06:02 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

I dont remember any reference to a specification that says you can have
only one id on a page.

Remember this... http://www.w3.org/TR/html4/struct/global.html id = name [CS]
This attribute assigns a name to an element. This name must be unique in
a document. This means that according to W3C recommendations, each ID name can be
used only once in a document. I can use the ID attribute as much as I
like, but each time I must have a unique ID name. And in case of argument we can look at what comes next: class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element.
Any number of elements may be assigned the same class name or names.
Multiple class names must be separated by white space characters. If ID names could be repeated in a page, there'd be no point in noting
that the same class name can be assigned to any number of elements.

Amazing. The contention is that one and only one ID can be used. Not 3, not
5 , not 30, but ONE! Period.

By unique, do you mean that each use may not include something like #name,
#cname, #dname, as you can in class?
Or does this mean it can only appear in the body of the html once?
As with class, you can repeat the usage.

[Els]

Richard wrote:

Neal wrote:

> On Thu, 26 Feb 2004 08:06:02 +0100, Barbara de Zoete
> <b_********@hotmail.com> wrote:

>> I dont remember any reference to a specification that says you can have
>> only one id on a page.

> Remember this...

> http://www.w3.org/TR/html4/struct/global.html

> id = name [CS]
> This attribute assigns a name to an element. This name must be unique in
> a document.

> This means that according to W3C recommendations, each ID name can be
> used only once in a document. I can use the ID attribute as much as I
> like, but each time I must have a unique ID name.

> And in case of argument we can look at what comes next:

> class = cdata-list [CS]
> This attribute assigns a class name or set of class names to an element.
> Any number of elements may be assigned the same class name or names.
> Multiple class names must be separated by white space characters.

> If ID names could be repeated in a page, there'd be no point in noting
> that the same class name can be assigned to any number of elements.

Amazing. The contention is that one and only one ID can be used. Not 3, not
5 , not 30, but ONE! Period.

By unique, do you mean that each use may not include something like #name,
#cname, #dname, as you can in class?
Or does this mean it can only appear in the body of the html once?
As with class, you can repeat the usage.

Nope, you can have only one id="container", and only one
id="header", and only one id="footer", and so on.
Several different id's in one document. But you cannot have
three elements which all carry the id="content".
--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Barbara de Zoete]

Neal wrote:

On Thu, 26 Feb 2004 09:23:22 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

Still, you can have as many id's in a page as you like, as long as
each is unique.

If ID names could be repeated in a page,

I don't see myself writing anywhere that one can repeat id's in a page.

Then were you saying that I can use the attribute "id" more than once
with different values? And why?

It might be we mean the same thing. What I mean is some very basic
markup like:

<html>
<head>
<link rel="stylesheet" type="text/css" href="foo/bar.css">
</head>
<body>

<div id="content"><!-- 1st id -->
<h1>title</h1>
<p>introduction paragraph</p>

<ul><!-- page menu -->
<li><a href="#name">Name</a>
<li><a href="#foo">Foo</a>
<li><a href="#bar">Bar</a>
<li><a href="#menu">nav.menu</a>
</ul>
<p>some text</p>

<h2 id="name">Name section</h2><!-- 2nd id -->
<p>some text</p>

<h2 id="foo">Foo section</h2><!-- 3rd id -->
<p>some text</p>

<h2 id="bar">Bar section</h2><!-- 4th id -->
<p>some text</p>
</div>

<div id="menu"><!-- 5th id -->
<!-- site menu -->
<ul>
<li>page 1
<li>page 2
</ul>
</div>

</body>
</html>

Now, what I mean to say is that there are 5 unique id's in this markup.
Probably only the #content and the #menu have their styles described in
the stylesheet.
Most of these id's are there for the purpose of easy navigation. You can
jump to any place in the page that has an id.

So, to me, you can use as many id's in a page as you like, as long as
they are unique within that page.

So, do we mean the same thing?

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

[Chet]

"Chet" <ng******@NOcharterSPAM.net> wrote in message
news:10*************@corp.supernews.com...

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise?
I've been making a few sample tableless pages to learn css, but
I've gotten into the habit of using only class. In one of the
pages I made, I changed the unique div classes to id's and the
html file size only decreased 23 bytes and the css file decreased a few bytes. Not much of a difference.

Is it just somewhat personal preference or something more valid?
Thanks in advance,
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)

Sorry for the confusion of my original post. Many of you thought
I meant using only one id on the entire page.

I meant being able to use each unique id only once as many of you
stated, i.e., #header, #content #footer, etc, could all be on the
same page.

I appreciate all of the replies and basically had my question
answered about using either class or id in a given situation. As
a few pointed out, the id is of higher priority and that was what
I was after.

Thanks to all,
--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)

[Neal]

On Thu, 26 Feb 2004 10:05:17 -0600, Richard <an*******@127.000> wrote:

Amazing. The contention is that one and only one ID can be used. Not 3,
not
5 , not 30, but ONE! Period.
? One exact ID can be used. It's against the recommendations to have two
or more instances of id="foo", for example, within a single HTML page.
By unique, do you mean that each use may not include something like
#name,
#cname, #dname, as you can in class?

That's all fine. They are unique. #foo and #foo are not unique. I can't
have two or more elements with attribute/value id="foo". That's all I'm
saying.

It is true that in some cases browsers will forgive you if you do have two
elements with id="foo", styling both the same. But it is the browser
saving your ass, not a correct method of styling id's. What's more, if you
linked to that section of the page <a href="#foo"> which id="foo" would
the link lead to? It's undefined, possibly different UA's could do
different things.

[Neal]

On Thu, 26 Feb 2004 17:45:58 +0100, Barbara de Zoete
<b_********@hotmail.com> wrote:

So, do we mean the same thing?

Certainly. Those are unique ID's. I simply misundersttod what you meant by
"more than one ID". You could have infinite id's on a page, limited only
by the number of permutations permissible as names and the storage space
available for the file - so long as no two are identical!

[Neal]

On Thu, 26 Feb 2004 10:05:17 -0600, Richard <an*******@127.000> wrote:

The contention is that one and only one ID can be used. Not 3, not
5 , not 30, but ONE! Period.

Who is making this contention? I've never heard it argued that one cannot
have <div id="content">...</div> and <div id="nav">...</div>, which seems
to be what you're lamenting.

[Brian]

Richard wrote:

One circle says "use only one ID". My circle says "BULLSHIT".
The specification, however, is definitive. And it does not agree with you.

http://www.w3.org/TR/html401/struct/global.html#adef-id
Both can be used as often as desired.
And if one tries to access an id used more than once via fragment uri?
If there was a limit of use, then why does the page work with more
than one?
As usual, the definition of "work" is relevant.
http://www.htmlgoodies.com/beyond/classid.html

The ID command works exactly the same way as the CLASS command. The
reason it exists is to allow you to incorporate these Style Sheet
models into JavaScript or DHTML. So, unless you are attempting to use
these with JavaScript, stick with the CLASS command. You can use the
ID command, but it won't do anything different or better than the
CLASS command. I think it all boils down to whom you ask.

Indeed. And if the person you ask (or the site which you are referred
to) describes class and id as "commands," then you know there's a bit of
cluelessness afoot.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Brian]

Chet wrote:

I know that id's should only be used for a unique element on a
page, but what is the difference of using class or id otherwise?

In principle, id should be used when an element can or should have a
unique, err, identifier. Class should be used to categorize elements on
a page.

Practically, I try to limit my use of id to two situations:

1. I want to allow a user to access an element via a fragment uri.

2. In forms, to explicitly connect a <label> to a form control.

In other cases, I use class.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Chet]

"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:iFI%b.29915$AL.533426@attbi_s03...

Chet wrote:

I know that id's should only be used for a unique element on a page, but what is the difference of using class or id

otherwise?
In principle, id should be used when an element can or should have a unique, err, identifier. Class should be used to categorize elements on a page.

Practically, I try to limit my use of id to two situations:

1. I want to allow a user to access an element via a fragment uri.
2. In forms, to explicitly connect a <label> to a form control.

In other cases, I use class.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

Thanks Brian, I appreciate the clarification. As it turns out, I
was using class and id's just about as you said.

--
Chet
ng******@NOcharterSPAM.net (remove NO.....SPAM)

[Markus Ernst]

"Chet" <ng******@NOcharterSPAM.net> schrieb im Newsbeitrag
news:10*************@corp.supernews.com...
[...]

I appreciate all of the replies and basically had my question
answered about using either class or id in a given situation. As
a few pointed out, the id is of higher priority and that was what
I was after.

What has been told but not very clearly: Combine class and id. Some elements
might have a set of properties in common - background color, border,
typeface - so you create a class with these properties. Some elements will
have different ids but the same class, and you define the differing
properties (as positioning for example) in the id styles.

Another point that I missed in the discussion: Id is not only style sheet
relevant, but also important for DOM access of the elements and for form
submission. Somebody mentioned that id can be an equivalent to name. That
branch of the discussion ended up in a misunderstanding about the allowed
number of "id" versus "elements with same id". But what is actually the
difference between id and name? What is for example submitted when I have an
element such as:

<input type="text" name="myname" id="othername">

? And if the universal attribute id is a replacement for name - why is name
still allowed in strict HTML?

--
Markus

[David Dorward]

Markus Ernst wrote:

<input type="text" name="myname" id="othername">

? And if the universal attribute id is a replacement for name - why is
name still allowed in strict HTML?

In the case of anchors - for backwards compatability. It is removed in
XHTML.

In the case of form controls - because id is only a replacement for the
client side uses of it, it is still used to name form controls (partly
because you can have multiple form controls with the same name, but id has
to be unique in a document).

--
David Dorward <http://dorward.me.uk/>

[Markus Ernst]

"David Dorward" <do*****@yahoo.com> schrieb im Newsbeitrag
news:c1*******************@news.demon.co.uk...

Markus Ernst wrote:

<input type="text" name="myname" id="othername">

? And if the universal attribute id is a replacement for name - why is
name still allowed in strict HTML?

In the case of anchors - for backwards compatability. It is removed in
XHTML.

In the case of form controls - because id is only a replacement for the
client side uses of it, it is still used to name form controls (partly
because you can have multiple form controls with the same name, but id has
to be unique in a document).

I see, thank you.

--
Markus

[rimian]

the filesize decreased by a few bytes because each character uses one byte. So if you change "class=" to "id=" you'll save 3 bytes.