DEV Community

Cover image for : vs :: in CSS3
Stephany Ikebudu
Stephany Ikebudu

Posted on • Updated on

: vs :: in CSS3

Have you always used trial and error to style elements when it involves either a colon : or a pair of colon ::? Yeah, me too. But today is the day you become confident with your CSS pseudo-selectionโ€ฆwhatever that means lol ;)
In this article, I explain them both with examples and share a few tips for styling elements using either.

The Difference
: precedes and identifies the state of an element while :: โ€œcreatesโ€ element(s). The difference between : and :: is that the former describes the state of a selected element usually involving user interaction while the latter is used to create element(s) as a part of the selected element and/or used to target elements using the selected element as reference.

It is important to note that : creates pseudo-classes, some examples are
:hover - to style an element when user is on it without selecting ie hovers over an element
:active - to style an element when clicked ie when element is active
:visited - to style anchor tags (links) when a user has clicked on it.
:focus - to style an input field that user clicked on.

While :: creates pseudo-elements. Some examples of pseudo-elements are
::before - targets created element that precedes selected element
::after - targets created element that succeeds selected element
::placeholder - targets placeholder atrribute value

How to Use
A good rule of thumb is to only use :: when it is necessary as this got introduced with CSS3 meaning :before is valid CSS and compatible with older browsers that havenโ€™t fully adopted the changes introduced by CSS3. Following this rule makes your CSS backward-compatible.
It is also good practice to only use CSS-generated content when necessary as CSS-generated elements do not appear on the DOM and therefore cannot be parsed by accessibility tools.

I hope you found this helpful, thank for reading!

Top comments (10)

Collapse
 
schmoris profile image
Boris

Thanks, quick but informative ๐Ÿ‘๐Ÿป๐Ÿ‘๐Ÿป๐Ÿ‘๐Ÿป

Collapse
 
stephikebudu profile image
Stephany Ikebudu

Thank you!

Collapse
 
fadekocodeit profile image
Future_Developer

Awesome! Thanks for sharing.

Collapse
 
stephikebudu profile image
Stephany Ikebudu

Thank you!

Collapse
 
nay_ko profile image
Nay Ko

Great Explanation. Thanks.

Collapse
 
stephikebudu profile image
Stephany Ikebudu

Thank you!

Collapse
 
victorbuarque profile image
Victor Gabriel Reis Buarque da Silva

Thanks, very interesting this explication. I didn't knew the difference and now is clear in my mind :D

Collapse
 
stephikebudu profile image
Stephany Ikebudu

Thanks for reading!

Collapse
 
mexikode profile image
MexiKode โš™

yes but not in practice, same as the & for nesting rules

Collapse
 
stephikebudu profile image
Stephany Ikebudu

Thanks for the feedback!