What is the difference between pseudo-classes and pseudo-elements?

Question

What is the different between div::after {} and div:after {} ? When do we have to use :: over :?

Double colon and single-colon notation is to distinguish between pseudo-classes and pseudo-elements.

What is the actual meaning of the above statement?

Answer 1

From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

Pseudo-class :

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

Examples:

• :active
• :checked
• :nth-child()
• :first
• :hover

Pseudo-elements ::

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

Examples:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

Answer 2

Pseudo-classes : it is applied automatically by the browser depending on the position of the element or its interactive state.

For Example :

E:hover Matches elements of type E when the cursor is hovering over it.

Pseudo-elements : It is applies styles to content based on its position in the HTML hierarchy.

For Example :

E::first-letter This applies a style to the first letter of the first line inside a block-level element E.

So ,

The CSS3 Selectors specification prefixes pseudo-elements with two colons instead of one. So, :first–letter becomes ::first-letter and :first-line becomes ::first-line. IE 8 and earlier don’t understand the double-colon prefix, so you need use the single-colon versions to avoid styles breaking in older browsers.