A pseudo class VS a pseudo element

Definition A CSS pseudo-class: We use it to define a state or a property of the element. It is a way of selecting an “existing HTML element”. A CSS pseudo-element: We use it to style a specified element. It does not select an element, but it creates a virtual element. Let’s take a look at what these definitions mean. A pseudo-class Again, it is related to an existing element, and we use a single colon character in CSS.

:link, :visited, :hover, :active
:focus, :first-child, :nth-child

A pseudo-element It targets the virtual element and style it, and we use double colons to identify pseudo elements. (Sometimes we just use a single colon for a pseudo-element because some older browsers don’t support double colons.)

::before, ::after, ::first-letter

//first-letter selects something that is not an element
//but the first letter of the paragraph
p::first-line {
    color: #fff;
}

Reference What’s the difference between a pseudo class and a pseudo element? Mastering Web developer Interview Code – Ray Villalobos, Lynda.com LINK]]>