when to use p.class rather that .class p

i have been working with this a while and never quite understood the subtleties of the following


i could go

#candy .bark li {color: red};

or #candy li.bark {color: red};

which one is appropriate and if different what is the difference

 

The difference is quite simple, as it goes in containing order.

For this CSS:

#candy .bark li {color: red};

Code (markup):

It refers to a list inside something with the class "bark" which is inside something with the id "candy".

For example:

<div id="candy"><ul class="bark"><li>List</li></ul></div>

Code (markup):

For this CSS:

#candy li.bark {color: red};

Code (markup):

.
It is still inside the candy div, but the li itself has the class "bark" now.

Example:

<div id="candy"><ul><li class="bark">List</li></ul></div

Code (markup):

When using CSS you have to ways to determine something with ids and class. In CSS "#candy" means something with the attribute id="candy", whereas ".candy" means anyhing with the attribute class="candy". And to make it more specific, you can narrow it down to only certain elements with the class candy, such as a list (li.candy). Or you can combne them:

div#chocolate li.candy
{
background:#000
}

Code (markup):

That code will make any lists with the class candy inside the div with the id chocolate have a black background.

I have probably made you even more confused now


BP