CSS classes and IDs

[Agix]

can an element in code have a class(es) and an ID?

for example i have made a static page that uses a top div that is
"fixed" across the top of the page.

The CSS defaults to the external one for all browsers, but then checks
for IE 6 and 7 and makes certain adjustments to make them render right.

I have a class that I use on to style identical div tags across the
page.

For example there are 6 div tags in total, but because the first one
comes before the title element, it needs some special formatting and is
stored as an ----> ID <----- namely:

#twod <----------- set as ID because it's a unique instance in the
page
{
height:356px; <------------- unique
background-color:#330066; <-------- in another class .dark
color:#FFFFFF; <--------- in another class .dark
margin:0 0 0 0; <---------- in another class .otherdiv
padding:87.5px 0 0 0; <------------------ unique
}


they are the only two unique properties of this div from the other 5
which i just use a ----> class <------ for.

however this div does have some other properties, but they are all
replicated elswhere. As I said I use an ID for the first div as its
only used once and is a unique element so its good practice to make it
an ID.

I just wanted to make it more elegant by actually taking use of the
cascading side of things.

I know I can apply multiple classes as I do in the page with <div
class="otherdive dark">content</div>

the question is can I use that but then apply the unique settings of
the ID?

for example <div class="otherdiv dark" id="twod">? this is simply so I
can re-use classes. It works really well as it is, but I want to be
able to take use of the recycling of code.

Is it possible I could change "twod" to a class and have <div
class="otherdiv dark twod">?
or will this break things?

any comments are appreciated

p.s. I am only an amateur so please forgive my mistakes as I am still
learning the whole web development thing.

Greg

 

[Neredbojias]

can an element in code have a class(es) and an ID?

for example i have made a static page that uses a top div that is
"fixed" across the top of the page.

The CSS defaults to the external one for all browsers, but then checks
for IE 6 and 7 and makes certain adjustments to make them render right.

I have a class that I use on to style identical div tags across the
page.

For example there are 6 div tags in total, but because the first one
comes before the title element, it needs some special formatting and is
stored as an ----> ID <----- namely:

#twod <----------- set as ID because it's a unique instance in the
page
{
height:356px; <------------- unique
background-color:#330066; <-------- in another class .dark
color:#FFFFFF; <--------- in another class .dark
margin:0 0 0 0; <---------- in another class .otherdiv
padding:87.5px 0 0 0; <------------------ unique
}


they are the only two unique properties of this div from the other 5
which i just use a ----> class <------ for.

however this div does have some other properties, but they are all
replicated elswhere. As I said I use an ID for the first div as its
only used once and is a unique element so its good practice to make it
an ID.

I just wanted to make it more elegant by actually taking use of the
cascading side of things.

I know I can apply multiple classes as I do in the page with <div
class="otherdive dark">content</div>

the question is can I use that but then apply the unique settings of
the ID?

for example <div class="otherdiv dark" id="twod">? this is simply so I
can re-use classes. It works really well as it is, but I want to be
able to take use of the recycling of code.

Is it possible I could change "twod" to a class and have <div
class="otherdiv dark twod">?
or will this break things?

any comments are appreciated

p.s. I am only an amateur so please forgive my mistakes as I am still
learning the whole web development thing.

Yes, you can do all that with impugnity.

 

[Toby Inkster]

can an element in code have a class(es) and an ID?

An element can have zero or one IDs, and zero or more classes. So you
could for example have:

<DIV id="quux" class="foo bar baz">
Example
</DIV>

And you could make that text stand out using the following CSS:

#quux { font-weight: bold; }
..foo { color: red; }
DIV.bar { background: yellow; }
..baz#quux { font-size: 150%; }
..foo.baz.bar { text-decoration: underline; }

That last line of CSS, selecting by multiple classes, wouldn't be
supported by IE 6 and below though. (IIRC.)