Pseudo classes are known for being a specification for a given selector you talk to in a stylesheet. For example, what if we want to lock down and talk to all unordered lists but just to the first list-items within those lists? Well, we can call to a pseudo class of that unordered list called ‘:first-child’. The example doesn’t just end there.

There’s several to choose from and as the standards for CSS get more and more sophisticated/upgraded, more pseudo classes become available to web designers and developers. But lets stick to the simpler one for now. Below is a list of pseudo classes to play with. Again, while the new CSS3 provides many more pseudo-classes than CSS2, browser support for them is varied.

:first-line

The “first-line” pseudo-element is used to add a special style to the first line of a text. The “first-line” pseudo-element can only be used with block-level elements. This is how you target the element in your stylesheet:

<br />p.overview:first-line {<br />     font-style: italic;<br />}<br />

:first-letter

These pseudo-classes matches an element only if it’s the first or last child element of its parent element. The “first-letter” pseudo-element can only be used with block-level elements. This is how you target the element in your stylesheet:

<br />p.overview:first-letter {<br />     font-size: 30px;<br />     font-style: italic;<br />     font-family: Times, serif;<br />}<br />

Tweet