CSS3: From Knowledgable to Ninja – Part 1 Selectors, Pseudo Elements

Pseudo-classes select elements that already exist, pseudo-elements create ‘faux’ elements you can style. Pseudo-elements also use the double colon, this was introduced to distinguish the difference between puseudo-classes and pseudo-elements. all browsers recognise the single colon and I believe IE ignores the double colon, so its probably safter to use the single colon.

first letter and first line

::first-letter and ::first-line
Target the first letter/line of the specified selector.

p::first-letter {}
  <p>The first letter will look like a drop cap and this line will be styled</p>



If you’ve ever used the HTML5 Boilerplate you may be familiar with this one, this pseudo-element lets you style the selection you make. By default on most browsers if you highlight something it’ll turn blue and the text colour will be white, Paul Irish one of the creators of the HTML5 Boilerplate has set his to a hot pink, so if you ever jump onto a site and see a hot pink highlight, chances are they’re using his boilerplate :D

*::selection {color:background-color; color:black;}
  <p>highlight anything and I'll be pink!</p>

before and after

::before and ::after
You can style the generated content with the ::before and ::after pseudo-elements. The ‘content’ property specifies what is inserted. I’ll talk more about these two pseudo-elements in the Generated Content post.