p.class vs .class p

The following styles are set in this document:
<style>
	.myclass p { background-color:BurlyWood; }      /* This is an example if .class p */
	.myclass { color:red; }
	div { border:1px solid silver; }
	p { border:1px solid #80f; color:blue; }
	p.myclass { color:green; }                      /* This is an example of p.class */
	pre { margin:0; }
	pre.code { color:#06f; background-color:#ffc; }
</style>

Code:<p>This is a paragraph with no class. Text is blue.</p>

This is a paragraph with no class. Text is blue.


Code:<div class="myclass">This is a div with class "myclass". Text is red.</div>
This is a div with class "myclass". Text is red.

Code:<p class="myclass">This is a paragraph with class "myclass". Text is green.</p>

This is a paragraph with class "myclass". Text is green.


Code:<div class="myclass">This is a div with class "myclass". Text is red.<p>There is a paragraph in this div. Text is blue because the p does not have a class.
<br>
It is, however, in an element with class "myclass" so it triggers the <strong>.myclass p</strong> style and the background-color is BurlyWood.</div>
This is a div with class "myclass". Text is red.

There is a paragraph in this div. Text is blue because the p does not have a class.
It is, however, in an element with class "myclass" so it triggers the .myclass p style and the background-color is BurlyWood.