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

class and id

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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

Jul 20 '05 #2

P: n/a
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

Jul 20 '05 #3

P: n/a
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/

Jul 20 '05 #4

P: n/a
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

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.