Pseudo-classes(:) | Pseudo-elements(::)
Pseudo-classes select regular elements but under certain conditions, like when their position relative to siblings or when they’re under a particular state. Here is a list of pseudo-classes in CSS3:
UI element states pseudo-classes
Pseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. This introduces huge benefits for creating cool effects with minimal markup, also aiding significantly in keeping the presentation of the document out of the HTML and in CSS where it belongs.
With the introduction of CSS3 the difference between pseudo-classes and pseudo-elements is a lot more clear as it is now the standard to use double colon (
::) on pseudo-elements, however we should be using single colon until certain browsers are phased out (I’m looking at you IE8 and below). Here is a list of pseudo-elements in CSS3: