pseudo-class A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type.They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code. Pseudo-classes are keywords that start with a colon:

:pseudo-class-name

:first-child we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add CSS to that class.

.first {
    font-size: 120%;
    font-weight: bold;
}

:last-child The :last-child CSS pseudo-class represents the last element among a document.

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

:only-child The :only-child CSS pseudo-class represents an element without any siblings.

li:only-child {
    color: fuchsia;
}

:hover The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.

a:hover {
  background-color: gold;
}

:focus The :focus CSS pseudo-class represents an element when the user clicks or taps on an element or selects it with the keyboard's Tab key.

input:focus {
    background-color: lightblue;
}

pseudo-element They act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon :: .

::pseudo-element-name

::before It allow you to insert “content” before any non-replaced element.

.box::before {
    content: "This should show before the other content."
}

::after It allow you to insert “content” after any non-replaced element.

.box::after {
    content: " ➥"
}