Tom Mollerus' Weblog

In a previous post, I discuss the use of attribute selectors in your CSS to highlight any required form fields that a user left blank. Here's another good use for attribute selectors: in one of the sites I work on, we used small graphics to create rounded corners just about everywhere (it was 2002 and we didn't know any better). After a while, I noticed that whenever someone printed a hardcopy of a page from the site, those graphics showed up as little floating quarter-circles. So, I did the tedious work of creating a new section in my stylesheet to prevent the display of those corners in printed format:

@media print {
	.hideFromPrinter {
		display: none;
	}
}

Then I assigned the hideFromPrinter class to each and every image tag for those blue corners... but I'm sure that I didn't find them all.

But now I know about attribute selectors, and the task of hiding those rounded corners during print view becomes much easier. I just added a new clause to my @media print section, like so:

@media print {
	.hideFromPrinter {
		display: none;
	}

	img[src^='/images/blue_corners/'] {
		display: none;
	}
}

There you have it! All of the blue corners, whose src attributes start with "/images/blue_corners/", no longer show up in print view. This works across the whole site just from 3 lines added to my stylesheet instead of adding code to every image tag.