<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>
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>
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.