Hi Mike
I'd be glad to. Generally speaking an ID selector is used
to identify a DOM container element which contains (multiple)
child elements, and to differentiate it from all other elements, whereas a class
can be employed anywhere on the page.
Consider the following simple example:
<div id="sidebarNavigation">
<ul>
<li><a href="" title="something"
class="highlight">Home</a></li>
<li><a
href="" title="something" >Services</a></li>
<li><a
href="" title="something" >About</a></li>
</ul>
</div>
<div id="mainContent">
....some content which
contains =>
<a href=""
title="something" class="highlight">a link to some content relevant
page</a>
....
</div>
It is possible to style to sidebar links in a certain way
and they can be identified as belonging to the page element with the id of
'sidebarNavigation' if this div only contains the <ul> of links then to
style there just apply a rule as follows:
#sidebarNavigation a { rules }
However, by identifying that I want to highlight all links
in a certain way I can override all links in the document with a class attribute
of 'highlight' as follows:
a.highlight { rules }
In this scenario, therefore, all links in the sidebar will
share a look and feel consistent with the styles set in the rule for the sidebar
links, but ALL links with a class attribute of 'highlight' will bear the mark of
that style rule, including the one link in the sidebar with the appropriate
class attribute, and the one in the main content div.
This is a very simple example and complex scenarios require
a great deal of thought to put together. In the exampleyou provided, MOST items
with an id also had a class attribute too, and this is generally called
'classitis' and if the design is marked up correctly this should not be
neccessary. Now, don't get me wrong here, I've fallen into the trap many times
before and the way I overcame it was to understand the purpose of the attributes
and to use them correctly. The rule I usually follow is, if an element
belongs to a parent and only elements belonging to that parent need to be styled
in a certain way then use the parent's id to style them (and therefore it is not
neccessary to apply a class attribute to them also) . If elements belonging
to multiple parents in the DOM require universal styles, then in this case apply
a class rule.
This is a good starting point, sometimes, it gets a lot
more complex. If it does sometimes it's a good idea just to take a step back ad
re-evaluate. There really shouldn't be a need to apply a class to every id, (few
designs require this fine grained contol) and thats where my (over zealous
perhaps) original comment came from.
I meant no offence, honestly, but I do stand by my
approach. If in doubt KISS (keep it simple stupid) is best. If you look at real
experts in css (not me) you will rarely see so many id and class attributes. If
it isn't required - leave it out!
Understanding the Cascade is vital to unlocking the right
approach in CSS.
Hope this helps
Peter
PSI Global
Ltd
Bowburn, Durham, DH6 5AD
England
Telephone +44 (0) 191
377 0550
Facsimile +44 (0) 191
377 0769
From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED]
Sent: 27 July 2006 11:25
To: [email protected]
Subject: RE: [WSG] Displaying page in different resolutions
Peter,
Could you please explain this comment? I understood
that ID's and classes were used for different purposes, and I find that the use
of multiple class names within a particular element can make the CSS more
manageable.
Mike
From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Goddard
Sent: Wednesday, July 26, 2006 3:46 PM<snip>Also, why have you given your divs both id's AND classes? Is this semantically neccessary or is it a functional thing. Try working with just one attribute where possible. it keeps the code leaner, does not confuse readers with audio browsers and is more to the spirit of Standards!#
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
