Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after

CSS wasn’t always as flexible as it is today. By using CSS pseudo-elements and pseudo-classes, designers can target elements based on their dynamic states or positioning in relation to other elements.

Pseudo-Elements and Pseudo-Classes

There are two types of pseudo selectors: pseudo-elements and pseudo-classes. Either of these pseudo selectors is intended to select objects for styling based not on their name or attributes but their current conditions. Consider a:visited as a canonical example. This pseudo-class selects all links that have already been visited, but that state changes over time. More links get visited as the users spends more time on the page. The pseud0-class’s selection grows dynamically in response to user actions.

In modern practice, the difference between pseudo-elements and pseudo-classes isn’t obvious. Classes are based on an objects state, while elements are based on the objects position. Classes should be prefaced with a double colon (::) while elements get a single colon. It’s also possible to use a single colon for everything which is also supported by CSS 2. There are also far fewer pseudo-elements compared to pseudo-classes.

Standard Pseudo-elements

The standard pseudo-elements are as follows. Click each to learn more about its functionality:

Creating Drop Caps with ::first-letter and :first-of-type

To produce interesting text styling effects, you can use the ::first-letter pseudo-element to select the first letter in a given element. But you don’t want that to apply to every instance of a paragraph in your text. You could apply a special class to your drop cap paragraph, but that’s hardly semantic and also annoying to code. Use :first-of-type to target only the first paragraph element on the page, ensuring your drop caps only appear in the first paragraph

p:first-of-type::first-letter {font-size: 1.5em;}

Styling Lists with :nth-child()

The nth-child selector is extremely flexible, capable of selecting an arbitrary number of child elements and following user-defined patterns. The selector takes a formula within its parentheses, allowing for an extremely specific method of determination. It follows the format (an+b) which isn’t as cryptic as it appears at first.

a is a multiplier, multiplying the value of n by its own value.

n counts up from zero. The first child element has an n of 1, the second has an n of 2, the third has an n of 3 and so on.

b is an integer that adds to or subtracts from the result of the an multiplication.

Alternatively, the specifications odd and even can be used in place of an+b to select odd and even children of the parent element.

For example, :nth-child(2n) will select every even element. :nth-child(2n+1) will select odd elements, and :nth-child(3n) will select every third child element. Specifications can also be made directly: :nth-child(4) will select the fourth child element.