CSS: mashing elements to class or ID

Normally I would do something like this in my styles.css page…

.whatever {color:blue;} /*class declaration */
#whoever {color:red;} /*ID declaration */

and eventually use

<p class=“whatever”>lorem ipsum</p>
<p id=“whoever”>lorem ipsum</p>

However, there are times when I see the element and the class mashed together like on this page: http://css.maxdesign.com.au/selectutorial/selectors_class.htm which uses:
div.big { color: blue; }
td.big { color: yellow; }

What is that called, when the element and class are put togther? Why?
Why would I use " p.whatever {color:blue;} " with the “p” element in front? (instead of just the .class as above)

Like wise, this page: http://css.maxdesign.com.au/selectutorial/selectors_id.htm has:
#navigation { width: 12em; color: #333; }
div#navigation { width: 12em; color: #333; }

Also, what is THAT called with the element and ID mashed together? Also why? Also why would i use " p#whoever {color:red;} " instead of just the #whoever? Thanks.