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?