One Final Look at CSS Selectors
Yeah, I know we have spent an ample lot of time on selectors, but CSS is nothing without selectors. Every declaration begins with a selector. It is worth the deep study. In this lesson, we will take a look at Pseudo-element Selectors.
Pseudo-element Selectors
Pseudo-element selectors act as if you added new HTML markup into the HTML document, and then styled that markup.
Did you get that?
Let’s see some examples.
The Pseudo-element selectors are very much like the Pseudo-class selectors in terms of how they are written. Except that the CSS3 specification states that they should be written with double colons.
Remember that Pseudo-class selectors are written with a single colon like this:
li:nth-child(2n) {color: red;}
Officially, pseudo-elements are denoted with a double-colon e.g. p::first-line
For backward compatibility, and better browser support due to browser manufacturers, the use of a single colon for these pseudo-elements is encouraged.
First Letter
The first-letter ...