Hello. I specialize in graphic design and development for web applications.

TylerM – Tyler Menezes \ Blog \ CSS Attribute Selectors

CSS Attribute Selectors

December 9, 2007 at 10:53 pm

Everyone who has ever written CSS is familiar with curly brackets and parentheses. Yet surprisingly enough very few even know of a hidden power of CSS, square brackets! Learn more about how to harness this power of PHP and how Microsoft is screwing it up after the jump.

How does it work?

How often do you need to style a text field in a stylesheet? All too often, right? And what’s your usual method? 90% of web designers seem to use the class method - class="text-input" or something similar. It turns out there’s an easier way! The power of square brackets allows you to select text fields with the following line of code: input[type="text"]

Why don’t I know about this?

There’s a pretty good reason you don’t see square brackets in stylesheets very often and - you guessed it - it’s Microsoft’s fault. Versions of Internet Explorer prior to release 7 don’t support attribute selectors in your CSS in much the same way they don’t support PNG transparency or fixed divs. Take this into account before you start styling your forms using this method. If you’re pressed for time and it wouldn’t look too bad without styles then go ahead and use it. If you want your site to play nice with all browsers then use the old way.

One Response:

Comment by echnar

damn you, internet explorer.

Say your words!

XHTML: You can use the tags <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your reply.

Comment Policy: Be nice. If you disagree, feel free to do so, but in a fact-supported manner. (E.g. "You are wrong. For example, the Wikipedia page for this subject says..." is okay, "You are a noob because you disagree with me!" is not.) Swearing is okay, provided it's not just there for the point of swearing and it's not excessive. Trolls aren't okay. This is not YouTube. By commenting you give me a perpetual, non-revokable license to publish your comments on my site. I can modify and delete them at will from this point.

* Your email will never be displayed, and I won't share it with anyone. If you have a Gravitar it will automatically be used.