The Right Pseudo Elements Notation

Did you know that there is a difference between pseudo elements and pseudo classes and that they actually should be written differently?

Pseudo classes refer to the state of the selected element, like :hover, :focus or :last-child.

For example:

p:last-child {
    margin-bottom: 0;
}

Pseudo elements on the other hand are actual elements, that get somehow created by CSS. The newest Chrome Dev Tools are making a good job in demonstrating that with actually showing them in the code. To make the difference clear pseudo elements are since CSS3 notated with two colons.

blockqoute::before {
    content: '“';
}

blockqoute::after {
    content: '”';
}

(Be aware, if you need to support IE8 you have to write it in the wrong single-colon CSS 2.1 syntax with only one colon.)

You can read more on pseudo elements at the W3.