To style all children of an element you identify that element (or elements) and then the children:

div.container > div {

} 

You could read this as "If a div is the child of a div with the class container apply these styles".  The > signifies is a child of.

Using the example from the previous page container is the class given to the two red divs.  This style rule set will apply to all child div elements of those.

Descendants

You can also style all descendants (children and their children and so on) by missing out the >:

div.container div {

} 

Another way of saying that could be that these styles apply to any div which is anywhere inside the container div.

Doing itThe div elements colour coded

Create a new page called children.html.  Put three div elements under the h1 heading.  Give them these IDs:

Inside container1 and container2 create another div each and give them IDs:

Inside container1div1 and container2div1 create two final div elements (one in each) and call them:

You should now have three top-level, parent div elements.  The first is empty.  The other two have a div inside (a child each) and yet another div inside that (descendants - nested div elements are common in Web design).

Inside each div place some text (just before any div which is inside them).  The easiest would be to copy the ID value for each one so you know which is which.

Delete any link element pointing to an external style sheet.  In the embedded style sheet put this:

div {
    border-width:1px;    
    border-style:solid;
    border-color:black; 
    margin:5px;       
}
#container1 {
    border-color:red;		    	      
}
	        
#container2 {	        	
    border-color:green;	        
}
	        
#container1 div {
    border-color:blue;
}
#container2 > div {
    border-color:cyan;			
}

Most of the styles are just to make it look clear.  The last two selectors are what matters.  They are the difference between styling children (the last one) and all descendants (the one before).

Inside container1 both div elements have blue borders.

Inside container2 only the direct child has a cyan border.  The div inside that does not have a cyan border as it is a child of a child.  Instead it reverts to the black styling applied to all div elements at the top.

The numbering of the div elements allows you to add more children meaning each child would have siblings.  That will be covered later!