Practical Dark Magic with Chained CSS Pseudoselectors

CSS pseudoselectors become very helpful when you can’t touch a site’s underlying PHP.

Today’s article comes from my experience working with small business WordPress clients. These clients often come to you with a huge mass of PHP code that you can’t change. For example, they’re trying to combine a social sharing plugin and a page builder theme, and it’s almost working but they can’t manage to fix one or two display details. “Throw everything out” is not an option, and neither is attempting to wrangle with either the theme’s or the plugin’s spaghetti code.

These types of projects make the purist in me shudder, but since good clients with real needs often find themselves with these types of setups, it’s certainly best to know how to help them. CSS pseudoselectors are an area of web development that becomes very helpful when you can’t touch the underlying PHP—so today, let’s learn a bit of CSS dark magic.

Intro to Pseudoselectors

CSS pseudoselectors significantly expand the power of CSS to intelligently select specific elements on a webpage, and to make types of changes that wouldn’t be possible otherwise.

Pseudo Classes and Pseudo Elements

I use “CSS pseudoselectors” as a general term for anything in CSS that looks like this: :selector. These “things” come in two flavors: pseudo classes and pseudo elements.