Question

Say I have a <div id="container"> with various elements inside of it including tables. Does the CSS selector #container table select all tables within the div (including grandchildren, great-grandchildren, etc)? Or does it select children only?

Also, if I want to select the first child div within the container div, how would I do that?

Answer 1

Yes; to put it simply, that selects all table elements within #container, regardless of nesting level.

The space is called the descendant combinator. As exactly what it says on the tin, it selects any descendants. That includes children, grandchildren, etc, again regardless of nesting level. It does not only select children; that purpose is served by the child combinator >.¹

To select the first child within your container as a div, you use

#container > div:first-child

Or if you have something else as the first child and you want to pick the first child that is of type div, you use

#container > div:first-of-type

---

¹ _{For this purpose, it’s often said to select only “direct children”, and where people say “children” they often mean “descendants” instead. Strictly speaking, though, “children” refers to immediate nesting level. There’s no such thing as an “indirect child”.}