Should you learn CSS pseudo classes? YES!

Apologies for the long time between blog posts; I’ve been busy producing Ghost Recon Breakpoint content, working at my day job, and planning out my next redesign.

Speaking of day jobs, I want to share one critical thing every aspiring web/front-end designer should know, and know well: Pseudo classes.

Working in large platforms (CMSes and the like), crafting a good theme can be a challenge. You’ve got to work within the constraints of the system as well as plan for expansion. Do you have a lot of plugins/addons you use with that CMS? You have to work within their constraints, too, and sometimes, they don’t have as many options for inserting your own HTML as you may like.

That’s where CSS pseudo classes come in.

:before and :after are staples, and being able to insert additional art using them is a must sometimes when you’re unable to add an extra container for things like icons, overlays and more (hint: content: ”; and display: block;).

Working with a list of items? :nth-child, :last-of-type, :first-child, and more are all going to be critical to crafting a unique style (hint: :nth-child(even)).

:not is a wonderful exclusionary tool when working with complex systems.

Of course, anybody writing code on the web has to know :hover, :active and :visited, which help modify link-states for user experience purposes (and more! hint: button:hover)

Does all this seem like Greek to you? Do you not see the potential uses? No problem!

Let’s say you need to add an icon preceeding all h1 elements, but you can’t rewrite your entire codebase just to add that in. How would you do that? Why, with :before!


h1:before {
  content: 'icon'; //insert your icon here
  font-family: iconFont; //insert your icon font here
  display: inline-block;
  margin-right: 5px;

That’s just one basic example, but there are so many other ways to use pseudo classes that learning them is something you definitely should look into, and soon!

So, if you’re feeling a little weak in the pseudo class department, read up on them at W3Schools.