Pseudo Classes

Pseudo Classes:
A pseudo-class is used to define a special state of an HTML element without adding extra classes to the HTML.

Common Pseudo class:
hover:
Styles an element when the mouse pointer is over it.

button:hover {
  background-color: blue;
}

active:
Styles an element while it is being clicked.

button:active {
  background-color: red;
}

visited:
Styles links that the user has already visited.

a:visited {
  color: purple;
}

Lang():
Translate for Quotation to ~.

q:lang(){
   quotes:"~""~";
}

focus:
Styles an element when it receives keyboard or mouse focus.

input:focus {
  border: 2px solid green;
}

First-child:
Selects the first child element.

p:first-child {
  color: green;
}

Last-child:
Selects the last child element.

p:last-child {
  color: orange;
}