Descendant selectors

More advanced selectors
HTML are made up of elements which can hold other elements -
html>
head>
title>
body>

Parent / child relationships

html - parent of head - ancestor of title
head - child of html - parent of title
title - child of head - decendant of html - never has any children - neither does an image element

html - parent of body - ancestor of all below
body - child of html - parent of div - ancestor of p and strong
div - child of body - parent of p - ancestor of strong
p - child of div - parent of strong
strong - child of p - descendant of div

html - parent of body
body - child of html - parent of div
div - child of body - parent of h1
h1 - child of div - descendant of body

example:

ol a {
background-color:#F00;
}
will only effect elements within any ordered list

to be more specific
# menu ol a {
background-color:#F00;
#footer ol a {
background-color:yellow;
}

div#extra = div with the child of extra
div #extra = div with the descendant of extra

div#extra ol li img {
background-color:red;
padding:1em;
}
allow to write clean css - allows to name key elements - container, header area, content area and use descendant selectors to pick out which elements within those areas to format - saves time and easier to update