Lair of the Wolf Dragon

Using CSS selectors to style the Jetpack Subscribe by Email widget

Update:There’s a better way to do this using the [attr=”value”] selector.

Being a web designer, I like to make things as close to pixel perfect as I can when I’m coding. So when I created a really nice button purely out of CSS for my blog redesign, I wanted to apply it everywhere.

One thing I love about WordPress is that everything is neatly labelled with all sorts of classes and IDs, making it super easy to style with CSS.

Well, almost everything it seems. It turns out that in the Subscribe by Email widget provided by the Jetpack plugin (which is made by WordPress) doesn’t have all those classes and IDs. In particular, the Subscribe button, which looks like this in the code:

<input type="submit" name="jetpack_subscriptions_widget" value="Subscribe"></input>

You can’t use “name” or “value” to select it with CSS, and it’s within a plain old paragraph tag that’s one of many plain paragraph tags in the widget. So attempts to style just that button were fruitless and it ended up looking something like this.

My Google Fu lead me to some results describing how to edit the plugin code, but that’s not something I’d really like to do. What if it’s overwritten in the next plugin update? I don’t want to be redoing it every time that happens.

Then it dawned on me. CSS3 has a handy selector known as :last-child. Using that, we can chose the Subscribe button which is the last input tag in the last paragraph tag. The CSS code for that would be this:

.jetpack_subscription_widget form p:last-child input:last-child { }

Just add some styling between the curly brackets and…

The one unfortunate thing is that the :last-child selector doesn’t work for IE8 and below. So unfortunately people using those browsers will see the ugly version instead of the pretty version. I’m sure there are hacks to fix that but I don’t support IE8 or lower on this website myself. It’s just too much trouble for me.

Until they get around to adding a class or ID to the Subscribe button, this will have to do. Happy coding!