CSS children Selector

Question

Lets say I have the following HTML

<div id="div1">
....
<span class="innercontents">...</span>
....
</div>

Can I select just the child of the parent ID?

Could I do something like

#div1 span
{
...
}

Thanks for any help.

Sorry for any confusion. I should have been more clear. In the above example I would like to just select the tags that fall under that specific

What should the selector match? The
or the ? (If the
, then what you're asking for isn't possible.) — millimoose, Sep 30 '11 at 20:43
"Can I select just the child classes of the parent ID?" => that sentence is very confusing. — Richard JP Le Guen, Sep 30 '11 at 20:43
`#div1 > .innercontents` http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors — Alex, Sep 30 '11 at 20:45

score 23 · Accepted Answer · edited Nov 21 '11 at 18:09

#div1 > .innercontents /* child selector */

The above will select these ids from the following HTML: c and d

<div id="div1">
   <div id="a">
     <span id="b" class="innercontents"></span>
   </div>
   <span id="c" class="innercontents"></span>
   <span id="d" class="innercontents"></span>
</div>

if you want all descendents selected such as b, c, and d from the above HTML then use

#div1 .innercontents

CamelCamelCamel · Answer 2 · 2011-09-30T21:19:23.913

3

Yes. #div1 > .innercontents. This is the immediate descendent selector, or child selector.

This is the best reference for CSS selectors: http://www.w3.org/TR/css3-selectors/#selectors

edited Sep 30 '11 at 21:19

answered Sep 30 '11 at 20:43

CamelCamelCamel

5,060
8
58
93

1

`#div1 .innercontents` is a descendant selector, not a child selector. – Frédéric Hamidi Sep 30 '11 at 20:45
#div1 > .innercontents then, for immediate descendents. – CamelCamelCamel Sep 30 '11 at 20:46

CSS children Selector

2 Answers2