I have seen some examples like this

p.class1 { some stuff }
p.class2 {some stuff }

and some like this

class1.p {stuff}
class2.p {stuff}

In one case, the class name is before the dot, in the other case the class name is after the dot. What is the difference between these two notations?


It's the nesting order of the elements. For instance:

p .red { color:red }

would apply a style to elements nested in p tags with the class="red" like below:

<p>The following span is <span class="red">red</span></p>

It would display as: The following span is red

.class1 p {color:green}

would apply a style to p elements nested under elements with class="class1" like below:

<div class="class1">Bill had <p>green</p> shoes on.</div>

It would display as:
Bill had
shoes on.