CSS question concerning id and class

D

Deryck

Hello,

I just inherited something from a designer and some of the CSS looks a
little strange.
Is the following legitimate:

<div class="cat-promo-box" id="promo-box1">

I thought a div would be class or id, but not both.

Thanks in anticipation,

Deryck
 
K

Kim André Akerø

Deryck said:
Hello,

I just inherited something from a designer and some of the CSS looks a
little strange.
Is the following legitimate:

<div class="cat-promo-box" id="promo-box1">

I thought a div would be class or id, but not both.

Yes, it's perfectly fine to do that, especially when you want a <div> to
inherit the properties of a certain class as well as adding/modifying some
properties unique to it (by using id in addition).
 
B

Barbara de Zoete

Hello,

I just inherited something from a designer and some of the CSS looks a
little strange.
Is the following legitimate:

<div class="cat-promo-box" id="promo-box1">

I don't think there is anything wrong here.
I thought a div would be class or id, but not both.

You can combine id's and classes with one element. No problem. Whether it is
useful depents fully on the context (markup, styles).


--
,------------- PretLetters: 'woest wyf', met vele interesses: --------------.
| weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html> |
| webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html> |
| zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html> |
`---------------------------------------------------------------------------'
 
D

Deryck

Barbara de Zoete said:
I don't think there is anything wrong here.


You can combine id's and classes with one element. No problem. Whether it
is useful depents fully on the context (markup, styles).
Thanks Barbara. I appreciate the quick reply.

Deryck
 
S

SpaceGirl

Deryck said:
Hello,

I just inherited something from a designer and some of the CSS looks a
little strange.
Is the following legitimate:

<div class="cat-promo-box" id="promo-box1">

I thought a div would be class or id, but not both.

Thanks in anticipation,

Deryck

example, which simply demonstrates how it works (and, perhaps why!):


<style type="text/stylesheet">
#mybox {border:10px solid black; width:200px;}

..red {color:red}
..black {color:black}

</style>

<div id="mybox" class="black"> hello world </div>
<div class="red"> hello world </div>
<div class="black"> hello world </div>


--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #
 
R

Richard

Deryck said:
I just inherited something from a designer and some of the CSS looks a
little strange.
Is the following legitimate:
<div class="cat-promo-box" id="promo-box1">
I thought a div would be class or id, but not both.
Thanks in anticipation,

Many times a writer might use "class" purely as a division name.

<div class="cat" id="lion">
<div class="cat" id="tiger">

With nothing to define what "class" is, nothing is executed.
Since class can be reused as often as desired, but not an ID.
 
T

Toby Inkster

Deryck said:
<div class="cat-promo-box" id="promo-box1">

I thought a div would be class or id, but not both.

A DIV (or indeed most elements) can take both a class and an ID. Indeed it
can take more than one class (but only one ID).

e.g.:

<div class="big red yellowbg" id="warningbox">
....
</div>

has three classes and one ID.
 
A

Andy Dingley

<div class="big red yellowbg" id="warningbox">
has three classes and one ID.

What are people's current expectations of having multiple classes work
satisfactorily (for CSS selectors), given the usual low standards of
browser bugginess ?
 
R

rf

Andy said:
What are people's current expectations of having multiple classes work
satisfactorily (for CSS selectors), given the usual low standards of
browser bugginess ?

Even IE5.0 understands it.
 
S

Steve Pugh

What are people's current expectations of having multiple classes work
satisfactorily (for CSS selectors), given the usual low standards of
browser bugginess ?

Works in IE5+, Gecko, Opera (from several versions ago at least),
Safari (and hence I'd assume Konqueror) .
Doesn't work in Netscape 4.
Don't know about IE4 and anything more obscure.

That's assuming the CSS is defining each class separately. I've not
done any tests with selectores along the lines of div.foo.bar but I'd
expect the results will be the same as above.

Steve
 
D

Deryck

Deryck said:
<Snip my question>

Thanks to all those who replied especially those who included example code
tidbits. I appreciate your help and genuflect in your direction.

Deryck
 
K

Kris

<div class="big red yellowbg" id="warningbox">
has three classes and one ID.

What are people's current expectations of having multiple classes work
satisfactorily (for CSS selectors), given the usual low standards of
browser bugginess ?[/QUOTE]

I use them all the time and it works reliably in IE5+ and standards
abiding browsers.
 
K

Kris

What are people's current expectations of having multiple classes work
satisfactorily (for CSS selectors), given the usual low standards of
browser bugginess ?

Works in IE5+, Gecko, Opera (from several versions ago at least),
Safari (and hence I'd assume Konqueror) .
Doesn't work in Netscape 4.
Don't know about IE4 and anything more obscure.

That's assuming the CSS is defining each class separately. I've not
done any tests with selectores along the lines of div.foo.bar but I'd
expect the results will be the same as above.[/QUOTE]

<element id="foo" class="bar">

IE/Win has trouble understanding constructions like

#foo.bar { ... }

Though it is not the same, the following could ease some pain:

# foo { ... }

..bar { ... }
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top