CSS: selecting an HTML element with a certain attribute

That isn’t a new thing; it actually exists in the W3C specs since CSS2.1 but I have seen a lot of guys misses this very productive feature while styling.
You can target HTML elements that have certain attributes and attributes values like this:

E[foo] Matches any E element with the “foo” attribute set (whatever the value).
E[foo=”warning”] Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~=”warning”] Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.
E[lang|=”en”] Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.

This can save you in a lot of situations; fore example I had a situation where I needed to change the style of an ASP.NET Calender control; when using an RTL (right to left) layout  the framework was rendering the previous month button with an ugly (align=”right”) attribute only for the previous month button, not allowing me to define different CSS classes for previous and next month buttons. So I had to do something like this which did the trick:

.NextPrevMonth[align='right'] {
    text-align: left;
}
Advertisements
This entry was posted in Software and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s