class and id

[Colin]

I'm afraid I'm bursting with questions this week.

Here's another:

Is it possible to give an element a class AND an id?

I'm thinking of a situation where I might want to give
some style via the class which is applied more generally, but
would want to change the style of that particular element
via javascript by referring to that id. I have tested this
with mixed results and was wondering what the general theory was.

-Colin

[Barbara de Zoete]

Colin wrote:

I'm afraid I'm bursting with questions this week.

Here's another:

Is it possible to give an element a class AND an id?

Yes, it is. You can combine classes with eachother and classes with
id's. Take care to know which attributes of the CSS are higher up in the
cascade. For example, if you have an id high up that sets a border and
than add a class which is further down your stylesheet that explicitely
gives a border:0 the element to which you apply the id and class will
have no border (unless of course it has !important added at the id
settings):

CSS:
#example { border:2px outset; }

#example1 ( border:2px outset !important; }

..example2 { border:0; }

HTML:

<p id="example" class="example2">This will have _no_ border.</p>

<p id="example1" class="example2">This will _have_ a border.</p>

Hope this helps.
--

Barbara

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

[Jim Dabell]

Colin wrote:

I'm afraid I'm bursting with questions this week.

Here's another:

Is it possible to give an element a class AND an id?
Of course. They are two separate concepts, there's nothing about them that
would conflict.

I'm thinking of a situation where I might want to give
some style via the class which is applied more generally, but
would want to change the style of that particular element
via javascript by referring to that id. I have tested this
with mixed results and was wondering what the general theory was.

Use id to identify particular elements, use class to group a range of
elements.

Don't forget that you aren't limited to labelling everything with class and
id attributes, you can select elements in other ways. It seems to me that
one of the biggest things that doesn't occur to people is that they can use
the document structure much more than they initially realise. For example,
instead of putting class="navigation" on all your navigation links, put
them in a <div id="navigation">, and simply select them with:

#navigation a { ... }

(or use something more appropriate than a <div> element, <ul> elements are
popular.)
--
Jim Dabell

[Brian]

Barbara de Zoete wrote:

Take care to know which attributes of the CSS are higher up in the
cascade. For example, if you have an id high up that sets a border and
than add a class which is further down your stylesheet that explicitely
gives a border:0 the element to which you apply the id and class will
have no border (unless of course it has !important added at the id
settings):

CSS:
#example { border:2px outset; }

#example1 ( border:2px outset !important; }

.example2 { border:0; }

HTML:

<p id="example" class="example2">This will have _no_ border.</p>

<p id="example1" class="example2">This will _have_ a border.</p>

No. Both <p> elements have a border, because id has greater weight
than class.

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Barbara de Zoete]

Brian wrote:

Barbara de Zoete wrote:

CSS:
#example { border:2px outset; }

#example1 ( border:2px outset !important; }

.example2 { border:0; }

HTML:

<p id="example" class="example2">This will have _no_ border.</p>

<p id="example1" class="example2">This will _have_ a border.</p>

No. Both <p> elements have a border, because id has greater weight than
class.

You're right. I didn't think of that. The combination only works with
all classes. Thanks for pointing that out.

--

Barbara

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