[CSS] Quickie: Is it possible to have child Class under ID ?

S

Steve Kostecke

Say I have a <div id="content"> for the main content column, and within
that column, I have several items, ie <div class="item"> (each would be
some sort of article of sorts.)

In the CSS say I have #content { ... }

Why is it I cannot have #content.item { ... } as this seems to fail on
any browser that I've tried (IE 6, FF 1.5, Moz 1.8b, NS 7, Opera 8), but
I do seem to recall that this was possible but I can't find the correct
syntax for this particular construct.

Thanks for any help.
 
D

Dylan Parry

Steve said:
Why is it I cannot have #content.item { ... }

You just need to insert a space in there in order for it to work as you
intended it to.

#content .item { ... }

This means any elements of class "item" contained within the element of
ID "content", which is what I presume you were trying to achieve?
 
J

Jonathan N. Little

Steve said:
Say I have a <div id="content"> for the main content column, and within
that column, I have several items, ie <div class="item"> (each would be
some sort of article of sorts.)

In the CSS say I have #content { ... }

Why is it I cannot have #content.item { ... } as this seems to fail on
any browser that I've tried (IE 6, FF 1.5, Moz 1.8b, NS 7, Opera 8), but
I do seem to recall that this was possible but I can't find the correct
syntax for this particular construct.

Sure it will work, you must be doing something else wrong that you do
not have in your message, URL of an example where it fails for you will
help.
 
S

Spartanicus

Steve Kostecke said:
Say I have a <div id="content"> for the main content column, and within
that column, I have several items, ie <div class="item"> (each would be
some sort of article of sorts.)

In the CSS say I have #content { ... }

Why is it I cannot have #content.item { ... }

That matches a div with a "content" id and a "item" class (<div
id="content" class="item">).

What you are looking for is a descendant selector construct, to create
that you need to insert a space: #content .item{...}

http://www.w3.org/TR/CSS21/selector.html
 
C

Chris F.A. Johnson

Say I have a <div id="content"> for the main content column, and within
that column, I have several items, ie <div class="item"> (each would be
some sort of article of sorts.)

In the CSS say I have #content { ... }

Why is it I cannot have #content.item { ... } as this seems to fail on
any browser that I've tried (IE 6, FF 1.5, Moz 1.8b, NS 7, Opera 8), but
I do seem to recall that this was possible but I can't find the correct
syntax for this particular construct.

You can have that, but it applies to the <div> itself, e.g., with
this mark-up:

<div id="content" class="item">

If you want it to apply to an element within the <div>, use:

#content item { ... }
 
S

Steve Kostecke

Dylan said:
You just need to insert a space in there in order for it to work as
you intended it to.

#content .item { ... }

This means any elements of class "item" contained within the element
of ID "content", which is what I presume you were trying to achieve?

Exactly, thank you, I knew I was missing something incredibly stupid :)
 

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,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top