pseudo classes

An HTML element is everything from the opening tag to the closing tag. This whole thing is an HTML element:

<div>potatos</div>

You can select this element and turn the background red in CSS like this:

div {
  background-color: red;
}

A pseudo class is added to the end of a selector to be more specific and only select that element if it's in a particular state. The colon denotes a pseudo class after the element. For example:

div:hover {
  background-color: red;
}

This style would only apply when you hover your mouse over the div. Here's 1 more example:

div:first-of-type {
  background-color: red;
}

If you had 2 divs on a page, this would only make the background of the first one red because the pseudo class adds additional restraints to the selector filtering it to only select the first one.

I see, thanks for taking your time to explain in a detailed manner, by the way how do you copy and paste code like you did to answer to my question?