Descendant

* Using more advanced selectors like descendant selectors helps us write clean CSS that saves time and is easier to update.
* In order to use descendant selectors you must understand the structure of HTML documents.
* An HTML document has 2 children - the head tag and the body tag.
* The head tag has the child title.
* The title tag cannot have any children.
* The body tag has the child div.
* The div tag can have children called header 1 or p for example.
* The p tag can have a child strong.
* If the elements are only one generation away from each other then they have a parent/child relationship.
* If the elements are more than one generation away from each other then they have a ancestor/descendant relationship.
* This "family tree" relationship can be represented as a graph by certain applications and these are very useful when writing complex selectors.
* The selector li a {...}; applies the CSS to every a element that is a decendant of the li element.
* The selector #menu ol a {...}; would only apply the CSS to any a elements in an ordered list with the id="menu".
* If there is a space between the selectors then we are saying "with the descendant of".
* If there is NO space between the selectors then we are saying "with the child of", e.g. div#extra ol li img {...};