Styling the Jetpack Subscribe by Email widget

Back in August 2013, I ran into some trouble trying to apply CSS to the submit button of the Jetpack Subscribe by Email widget. One of the things I said was:

You can’t use “name” or “value” to select it with CSS…

Well actually, I was wrong. You can indeed select an item using one of its attributes. So while using the :last-child selector does indeed work, there’s a much more efficient method: using [attr="val"].

In the case of the previous case, I wanted to apply CSS to the submit button within the widget. So instead of:

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

You would use:

.jetpack_subscription_widget input[type="submit"] { }

One of the problems with :last-child is that it was introduced in CSS3, which some older browsers do not support (such as IE8 and older). However, [attr="val"] was added in CSS2.1, so it is supported by a lot more browsers, all the way back to IE7 in fact. If you’re required to code websites for IE6 or 5.5…you have my deepest sympathies.

[attr="val"] is quite versatile as well. Want to style all of the text input fields on your page? Use this:

input[type="text"] { }

Or let your visitors know which links open in new windows?

a[target="_blank"] { }

Any tag with an attribute and value can be styled in this way. Neat, huh?

September 3, 2014 No comments /

Leave a Reply

%d bloggers like this: