Specificity Calculator looks like a useful tool... "a visual way to understand CSS Specificity (tweeted by Girls Develop It)

====== Exercise CSS Family Tree 1. Dad, Daddy ========================

(grandad, son/father) Blue

(grandad, son/father, son) Gray

(grandad daughter/wife) Brown

(grandad, daughter/wife, son) Brown

(grandad, son) Green

====== Exercise CSS Family Tree 2. Child Selector =====================

A child selector > is used between 2 other selectors to limit the cascade effect to direct children of the parent. For example

		div > p {}

Only applies to paragraph elements which are direct descendants of a div(ision) element.

CSS Selector ul li points tothe yellow duck image. The CSS selector ul.duck li points to the green duck.
Using class="duck" on the list below, all ducks were green.
In the CSS, I changed the second li to li.ud (new class ud). ul.duck li> -- > ul.duck li.ud > and added class="ud" to the last li "I am and ugly duck".
but the exercise: "Try without using a class attribute"
the instructions are: Use a child selector on the CSS declaration on line 15 (12) -- the ul.duck li -- to limit the ugly duck property's cascade. ALAS! note that the "I am an ugly duck" li is directly below the ul class=duck, the others have another ul in the way

I'm a duck
I'm a duck
I'm a duck

I'm an ugly duck

====== Exercise CSS Family Tree 3. Twinkle Little Star ==========

This is div class="reward", defined as:

 
div.reward * {
	display:block;
	width: 60px;
	height: 57px;
	background-image: url('http://hosturl.co.uk/cc/gs.png');
	padding: 0;
	margin: 0;
}
-------------------------------------

<div class="reward">
    <div>  </div>             << only first dispalyed if no *
    <span> </span>
    <p>  </p>
    <strong>   </strong>
    <nav>   </nav>
</div>

this just shows that div.reward * settings
affect anything in a div that has class=reward
if I remove the asterisk, only the first star, div, is displayed .......... WHY ? when one star is displayed, it is for the CONTAINING div; the * means 'apply class to all elements WITHING the containing div

========= Exercise CSS Family Tree 4. Hubble Bubble =====

h1, h2, h3, h4, h5, h6 all set to font-size:20px;
( NOTE that I have NOT overriden the padding (spaces above, below)

h1 We should be the same size

h2 We should be the same size

h3 We should be the same size

h4 We should be the same size

h5 We should be the same size

h6 We should be the same size