By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,159 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

IDs versus Classes

P: n/a
I'm renewing my interest in CSS and downloaded some stylesheets.
However, the .css uses both an ID and class. It looks like something
like this.

..class1 {
/* CSS code */
}

#styleID1 {
/* CSS code */
}

#styleID2 {
/* CSS code */
}

<DIV Class="class1">some text</DIV>
<DIV ID="styleID1">some text</DIV>
<DIV ID="styleID2">some text</DIV>

..class1 is not part of any other known tag, so why wouldn't one simply
use IDs throughout? Basically, what is it that classes can do that IDs
can't? Thanks.
-- Michel
Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
Michel wrote:
However, the .css uses both an ID and class.

.class1 is not part of any other known tag,
Class can be applied to most elments in html.
so why wouldn't one simply use IDs throughout?
Did you mean that you only saw a class attribute used once in the
document?
what is it that classes can do that IDs can't?


An id must be unique in each document.
<h2 id="bar">sub heading</h2>

It can be used in modern browsers to access a part of a document via a
fragment uri.
http://www.example.com/foo.html#bar

It can also be used in a css selector
h2#bar {font-size: 200%}

Class can be used any number of times in a document to organize it.
<h2 class="faq">faq topic 1</h2>
<p>answer to topic 1</p>

<h2 class="faq">faq topic 2</h2>
<p>answer to topic 2</p>

<h2 class="faq">faq topic 3</h2>
<p>answer to topic 3</p>

It too can be used for a css selector, but the specificity is lower
than for id.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2

P: n/a
On 17 Oct 2003 13:49:54 -0700, Michel wrote:
Basically, what is it that classes can do that IDs can't?


The formidable Brian already explained the essentials. I just wanted
to add that the question is not quite right... ids and classes are two
different things -- it's like asking "what can a color do that an
address can't?" (both of a house, for example).

Ids are unique (within a page) identifiers of elements. Classes are
groups of elements -- elements that have something in common.

It may happen that you look at a document and you see only one single
instance of a class. But maybe that class gets used multiple times in
other documents that use the same stylesheet, or there were multiple
instances and modifications removed all but one, or the designer
planned for the future and saw the possibility of later modifications
introducing multiple instances.

Or maybe the designer simply decided that in this case, the associated
style was not a feature of _one_ unique element, but something that
could be a feature of a class of elements -- no matter whether there
actually are multiple instances of that class in the document.

Jul 20 '05 #3

P: n/a
In article <13**************************@posting.google.com > in
comp.infosystems.www.authoring.stylesheets, Michel
<m.********@att.net> wrote:
Basically, what is it that classes can do that IDs
can't?


class="x" may be used many times in a given document. ID="x" must
not be used more than once in any document.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #4

P: n/a
In article <MP************************@news.odyssey.net>,
Stan Brown <th************@fastmail.fm> wrote:
Basically, what is it that classes can do that IDs
can't?


class="x" may be used many times in a given document. ID="x" must
not be used more than once in any document.


Also, the ID attribute can be addressed by CSS which will have a higher
authority over styles associated with classes. ID labeled elements can
also be easily targeted by JavaScript.

Just two practical advantages I thought worth mentioning.

--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
Jul 20 '05 #5

P: n/a
AD.
On Sat, 18 Oct 2003 16:20:06 -0400, Stan Brown wrote:
In article <13**************************@posting.google.com > in
comp.infosystems.www.authoring.stylesheets, Michel <m.********@att.net>
wrote:
Basically, what is it that classes can do that IDs can't?


class="x" may be used many times in a given document. ID="x" must not be
used more than once in any document.


And an element can also have more than one class eg: class="x y".

Cheers
Anton
Jul 20 '05 #6

P: n/a
CJM
I think the other guys have this thoroughly covered, but I thought of a
little addition that might be worth considering...

It may be the case, in this example, that the styles are used only once, and
that specificity is not an issue. In which case, the author could as easily
opted to use IDs throughout. However, the author may well be planning
ahead... he may have further pages coming that will use these styles again
and again. Better he build this in now, than to have to go back and changes
his IDs to Classes later on.

On the other hand, I might be talking out of my pants, and the situation is
simply that the author has make an arbitrary decision to simply use Classes
in this example! :)

Chris

"Michel" <m.********@att.net> wrote in message
news:13**************************@posting.google.c om...

.class1 is not part of any other known tag, so why wouldn't one simply
use IDs throughout? Basically, what is it that classes can do that IDs
can't? Thanks.
-- Michel

Jul 20 '05 #7

P: n/a
In article <pa****************************@privacy.net> in
comp.infosystems.www.authoring.stylesheets, AD. <me@privacy.net>
wrote:
And an element can also have more than one class eg: class="x y".


Yes, but MSIE doesn't do the right thing. I can't remember whether
it ignores all the classes or all after the first.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #8

P: n/a
Stan Brown <th************@fastmail.fm> wrote:
In article <pa****************************@privacy.net> in
comp.infosystems.www.authoring.stylesheets, AD. <me@privacy.net>
wrote:
And an element can also have more than one class eg: class="x y".


Yes, but MSIE doesn't do the right thing. I can't remember whether
it ignores all the classes or all after the first.


Which version of MSIE?

I can't remember what IE4 did but IE5+ applies all the classes. Try it
and see for yourself.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #9

P: n/a
In article <cp********************************@4ax.com> in
comp.infosystems.www.authoring.stylesheets, Steve Pugh
<st***@pugh.net> wrote:
I can't remember what IE4 did but IE5+ applies all the classes. Try it
and see for yourself.


I'll be happy to take your word for it. I know this has come up in
the past and I was warned off multiple classes because _some_
browser in fairly common use screws that up.

I's like to try MSIE5, but I can't because Microsoft won't let us
have multiple versions of MSIE installed on the same machine.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.