Practical Applications of Pseudo Elements and Classes
A note about browser support:
There’s some pretty crazy stuff going on in this post. The support for pseudo classes and elements is quite good, and you can start using them in production now. The code examples in this post show properties without vendor prefixes for readability purposes. If you’re not using Compass or Autoprefixer to deal with vendor prefixes, you can always reference Can I Use to see which vendor prefixes, if any, are required.
Understanding what pseudo classes and pseudo elements are used for can be a bit confusing at first.
What are they? Why are they pseudo?! You’re probably already familiar with a few of them. In any introductory CSS class, the
:hover state for anchor links is a popular example.
Here are some practical use cases for these pseudo web things:
:active pseudo class is useful for representing skeuomorphic behavior in web interfaces.
I’ve used a button in this example and transformed the
translateY() to offset the box shadow. It has the visual effect of the button being pressed or clicked.
One cool use of the
:checked pseudo-class is custom radio buttons or checkboxes. Given the following markup:
Notice how the label wraps both the input and the custom radio content? Doing this
allows us to use the adjacent sibling selector. Anytime the label is clicked, the
input takes on the
checked property. Then, we apply the styles to an div that’s
adjacent to the
If we hide the radio button input with
visibility:hidden, we are free to style
the contents of the
<label> container as we please.
:first-child and :last-child
A popular use case for the first and last children of a container is the widget. Here’s some markup:
In our widget, we want to have equal padding for the
widget container, but ignore the margin-top of the
<h1> and the margin-bottom of the
This is a common design pattern, where the container has equal spacing all around the
elements. If the
p were to retain its margin when directly next to
the widget’s container, it would look a bit funky.
Alternating colors! It’s an effective technique that takes a very small amount of code:
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
:nth-child was available, you’d have to either hardcode classes into
Using a CSS solution allows us to keep styles together, which ultimately decouples
our front end code.
:target pseudo class is useful for highlighting hash-linked sections
on web pages. This is a great usability technique. Normally the page will jump
to the anchor on click and position the element with the corresponding ID at the
top of the page. If the linked-to element is towards the bottom of the page, and there
isn’t enough room at the bottom for the element to be all the way at the top of the
page, the only way to identify what was linked to will be to use the
pseudo class to highlight the important info.
Here are some other examples of using the
:target pseudo selector:
The difference between pseudo-classes and pseudo-elements
When both use the
: syntax to denote pseudo-ness, it’s difficult to remember
the difference between a class and an element. The CSS3 spec provides a syntax
for distinguishing between pseudo classes and pseudo elements:
Pseudo classes are used to select elements which cannot be selected using a class or id. I like to think of pseudo elements as being able to add content to a node in the DOM without adding more markup, like all the cool things on one-div.com.
Most of the examples in this post reference pseudo classes, but Chris Coyier has a great round up of all the cool things you can do with pseudo elements over at CSS Tricks.
:before and :after
My most frequent use of the
:before pseudo element is the micro clearfix. In Sass,
you can extend a clearfix place holder:
Micro Clearfix adapted from Nicholas Gallagher.
There’s no need to use images or hard code div’s with a class if you want to pull off the drop cap technique:
Jesse Shawl is a Front End Developer at nclud - whose focus intersects web performance and cutting edge browser interactivity. He's an open source advocate who enjoys building tools for the web with third party API's and mesmerizing CSS animations.Edit this Post