What is difference in defining class .first or p.first in css

Question

I am bit confused what is the difference in defining class like .first or p.first in css

Answer 1

First difference was already told by @_Retr0/-:

> .first will target all (any) elements which have 'first' as class attribute

> p.first will target all <p> elements which have 'first' as class attribute

Second difference is that p.first has more priority than .first, so p.first rules will overwrite .first rules, even if they are previously declared...

Few examples:

<div class="first">a div with class 'first'</div>
<div>a div without class 'first'</div>
<p class="first">a p with class 'first'</div>
<p>a p without class 'first'</div>

<style>
p.first { /* target the first <p> */
background:red; /* applied to the first <p> */
}
.first { /* target the first <div> and the first <p> */
border:black solid 2px; /* applied to the first <div> and the first <p> */
background:cyan; /* applied only to the first <div> as p.first declaration has higger priority */
}
</style>

Answer 2

can you show by example ? This would help me to Understand better.

Answer 3

A logical thinking must be there to understand this concept about which Visph has discussed

Answer 4

@Siddharth Saraf:
If you're talking about the css selector prioriries (specificities), it's quite hard to master, but it's very interresting, helpful and powerful to be known to better handle Css ;)

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 5

p.first selects all the classes which r in p tag whereas .first selects all the classes