Friday, December 7, 2012

Difference between Pseudo classes and Elements(:: vs :)

Pseudo Elements:

Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.

Pseudo Classes:

Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and focus.)

.example:before {}
.example:after {}
.example:first-child {}
.example::before {}
.example::after {}
.example:first-child {}

They are not in DOM at all when inserted through CSS.

No comments: