Difference between pseudo-class and pseudo-element

I can’t understand properly where and how the both type of selector (pseudoclass and pseudoelement) are used. What is difference between : and :: ? Where should we use which? Please explain clearly.

Pseudoclasses: these are basically a special state of elements.
Whenever the state changes i.e when we hover, focus or visit some element then it is called a state change.
And applying a property over Changing the state is done using pseudoclasses.
Eg:
a:hover , a:active , a: visited {
Color: red;
}

And on the other hand

Pseudoelement : this property is basically used to style a particular part of that element.
For eg if you have a paragraph and you need to change its particular first line of it then pseudoelement is responsible for it.
Eg:
P::first-line , p::first-letter{
Color: blue;
}

Hope this clears your query
Happy learning :smiley: