Theory and Logic for Class and IDs

I am getting a headache trying to understand the true difference and an
example to see the difference between Classes and Ids.

I have been to several websites and they explain it in a very bland way.
They even went so far as to say that it is true "what is the use of IDs when
you've got Classes that do the same thing". I have read similar discussions
stating that IDs are for layers. But have not yet seen an example.

What exactly does this mean below?

"As just noted, the syntax for the ID selector is much like that for the
class selector. Again there are two kinds of selector, those associated with
a particular type of element, and the more general selector that can apply
to any element with an ID that matches the ID of the selector. We'll see
shortly what it means for an element to have an ID.
Solitary ID selectors
ID selectors that can apply to any type of element have the simple syntax
#idname, for example, #title. This selector selects the single element on a
page that has an ID of "title".

ID selectors
ID selectors that apply only to a particular type of element (for instance
only headings of level one or paragraphs) have the syntax
element-name#idname, for example h1#title. This selector selects the single
heading of level 1 with an ID of "title". It will not select any other
element with that ID, nor will it select any other headings of level 1."

..bluetxt {color: blue}

#bluetxt (color: blue)

<p class="bluetxt">text</p>

<p id="bluetxt">text</p>

Gives the same outcome - I don't understand!!!

Yes I know you can separate certain tags with a specific class or id. Either
all html tags like all H1s are blue -period! or you can give one a class OR
id of a specific name to change a specific H1 somewhere on the page. Again -
WHAT IS THE USE OF HAVING BOTH CLASSES AND IDS! I see no difference
logically or theoretically.

Are there people that use classes for one reason and IDs for another to cut
down on confusion of different sections or color themes - there has to be a
method to the madness.

* Elements with an ID can be used as "named anchors", e.g.

h1 id="top">main heading</h1
...
...
a href="#top">back to top</a

This is not uniformly supported, however. Names work reliably.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Michael Fesser" <netizen (AT) gmx (DOT) net> wrote

.oO(Kitty)

I am getting a headache trying to understand the true difference and an
example to see the difference between Classes and Ids.

.oO(Kitty)

I am getting a headache trying to understand the true difference and an
example to see the difference between Classes and Ids.

I have been to several websites and they explain it in a very bland way.
They even went so far as to say that it is true "what is the use of IDs when
you've got Classes that do the same thing".

Classes and IDs are not the same!

The main difference is that multiple elements on a page may share the
same class, while an ID has to be unique throughout a page, i.e. only
_one_ element may have a particular ID (that's what the name says - to
_identify_ an element).

Additionally there are some other things:

* IDs are very important in the DOM (Document Object Model) to access
certain elements with some programming language (Javascript for
example) to query/change their properties etc.

* Elements with an ID can be used as "named anchors", e.g.

<h1 id="top">main heading</h1>
...
...
<a href="#top">back to top</a>

* ID selectors have a much higher specificity than all other selectors
and will override them if multiple selectors apply to one element
(have a look at the CSS spec for explanations and examples).

6.4 The cascade
http://www.w3.org/TR/CSS2/cascade.html#cascade

What exactly does this mean below?

"As just noted, the syntax for the ID selector is much like that for the
class selector. Again there are two kinds of selector, those associated with
a particular type of element, and the more general selector that can apply
to any element with an ID that matches the ID of the selector.

I consider this wrong (or at least confusing). There are no different
kinds of ID/class/whatever-selectors. What this text is referring to is
that you can combine different kinds of selectors to match different
sets of elements. The authors of the above make a difference between the
element selector (matches a particular element-type) and the universal
selector (matches all elements).

.bluetxt {color: blue}

#bluetxt (color: blue)

p class="bluetxt">text</p

p id="bluetxt">text</p

Gives the same outcome - I don't understand!!!

Bad example, in this case it doesn't really matter if you use an ID or
class.

Another one: Assume you want table rows to be colored alternating. That
means all colored rows share the same properties, hence the same class:

<table>
<tr><td>...</td></tr>
<tr class="colored"><td>...</td></tr>
<tr><td>...</td></tr>
<tr class="colored"><td>...</td></tr>
....
</table>

You can't do this with IDs, since an ID has to be unique.

Are there people that use classes for one reason and IDs for another to cut
down on confusion of different sections or color themes - there has to be a
method to the madness.

I usually use IDs for the main structural parts of my sites, which
appear exactly once:

<ul id="nav">...
<div id="content">...
<div id="news">...
<p id="footer">...

or if I really need them (named anchors, DOM etc). Otherwise I use other
selectors (descendant, child, class, ...).

HTH
Micha