Without getting overcomplicated and technical definition, Pseudo-classes is a specific characteristic of an element that can be target with CSS. A few common and known Pseudo classes are :link, :visited, :hover, :active, :first-child, :last-child. There are many more we are going to each of them in this article.
Pseudo-classes are always preceded by a colon (:) and then comes a name of pseudo-class and sometimes a value in parenthesis :nth-child(n) anyways?
Pseudo-elemnts are like virtual elements that can be treated as an html elements. The thing is that they doesn’t exist in DOM. This means we actually don’t type pseudo-elements, but rather create them with the css.
A few of pseudo-elements are :after, :before and :first-letter, we will talk about them at the end of article.
Single or Double Colon for pseudo-elements ?
The short answer is , in most cases, either.
The double colon (::) was introduced in CSS3 to differentiate pseudo-elements and pseudo-classes such pseudo-elements ::before and ::after from pseudo-classes :hover and :active. All browser support double colon (::) except IE8 and below.
When not to use CSS generated content.
Generating content via css is achieved by combining the CONTENT CSS property with :before and :after pseudo-elements. This “content” may be a plain text or contain that we manipulate with CSS to display.
Use CSS generated content for decoration and non-vital information, but make sure its properties handled by screen-readers, so that people with assistive technologies are not distracted.
Experimental pseudo-Classes and pseudo-elements.
An experimental pseudo-classes and pseudo-elements means its specification is not stable or finalized. The syntax and behaviour could change on the road. However, we might able to use experimental pseudo-classes and pseudo-elements now by applying vendor prefixes.
So below are the pseudo-elements and pseudo-classes we are going to look in this article. The psuedo-classes and psuedo–elements are categorised for sake of understanding.
dkblog 