What is the Difference Between Single and Double Colon in CSS?

Do you know what is the difference between single and double colon in CSS? Or did you know that there is a difference at all?

/* CSS3 syntax */
.css3::before { ... },
.css3::after  { ... }

/* CSS2 syntax */
.css2:before { ... },
.css2:after  { ... }

Single is used for pseudo-classes like :active or :hover, while double is used for pseudo-elements like ::before or ::after. So what is the difference between pseudo-classes and pseudo-elements?

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Pseudo-classes

Pseudo-classes as used for selecting states of an element. They are not elements themselves. Some examples are:

.anchor:hover {
    /* styles for the hover state of the anchor */
}

.anchor:visited {
   /* styles for already visited anchor */
}

pseudo-elements on the other hand are used for selecting parts of an actual DOM element, such as what comes before or after it, specific letters, or even lines. Some examples are:

.paragraph::before {
    /* style the pseudo element before the paragraph */
}

.paragraph::after {
    /* style the pseudo element after the paragraph */
}

.paragraph::first-line {
    /* style the first line of the paragraph */
}

.paragraph::first-letter {
    /* style the first letter of the paragraph */
}

10 Best Practices for Quickly Improving Your CSSBuilding scalable and manageable stylesheetsCSS has its own nuances that can make or break your design. Here are 10 tips for CSS :  best practices that can help you bring out the best from your styles.Learn More

Looking to improve your skills? Master CSS from start to finish.

Remove ads

---

Resources:

• Pseudo classes in CSS
• Pseudo elements in CSS