E[foo$='bar'] -- An element whose foo attribute ends exactly with the string 'bar'
This is very useful for adding information to links to show the file type of the link. For example, you may want to add an icon to show that the link points to a zip file. You can do this with the following style rule (which you'd have to alter to point to a valid image you wanted to use):
a[href $= '.zip']
{
	padding-right: 20px;
	background: transparent url(zip.png) no-repeat right;
}
For example here is a link to a zip file.
E[foo$='bar'] -- An element whose foo attribute starts exactly with the string 'bar'
This is very useful for adding information to links pased on the protocol of the link. For example, you may want to add an icon to show that a link is a mailto link that will start a new e-mail message. You can do this with the following style rule:
a[href ^= 'mailto:']
{
	padding-right: 20px;
	background: transparent url(email.png) no-repeat right;
}
So for example here is a link to an imaginary test e-mail address.
E[foo*='bar'] -- An element whose foo attribute contains the substring 'bar'
I struggled to thing of a good example for this one, so the only thing I could come up with was adding an little picture of a person talking to any link containing the word 'blog' using the style rule:
a[href *= 'blog']
{
	padding-right: 20px;
	background: transparent url(blog.png) no-repeat right;
}
So for an exmaple you could vist the main page of my blog.
E[foo$='bar'] -- An element whose foo attribute is exactly equal to 'bar'
Again thinking of an example was a bit tricky so I went with changing a link to the main Google page to have a blue background using the following style rule:
a[href = 'http://www.google.com']
{
	font-weight: bold;
	color: white;
	background-color: blue;
	padding: 5px;
}
So here is the example link to the main Google search page.
E[foo] -- An element with a foo attribute
Now I think this one is very useful and I'm going to be updating some of my style sheets to make my life a little easier. Sometimes I'll have an image that when clicked runs some JavaScript code. Usually I want to signal to the user that the image is clickable by making the cursor turn to a hand like it would over a normal link. I've previously used two different methods to achieve this; either add cursor: pointer; to the style attribute of the image or enclose the image in a standard link and move the JavaScript code to the link. Neither solution is overly clean. Using this CSS selector though I can simply say that any image with an onclick attribute should have the hand cursor to show that it is clickable using the following rule:
img[onclick]
{
	cursor: pointer;
}
So here is an example image that is clickable .
E[foo~='bar'] -- An element whose foo attribute value is a list of space-separated values, one of which is exactly equal to 'bar'
Now I'm sure there are easier ways of doing this but you could use this selector to selectively combine CSS classes. For example, imagine that we want to be able to tell the user things that are important, warnings, or important warnings. We could use the following three rules:
.important
{
	font-weight: bold;
}

.warning
{
	color: red;
}

.warning[class~='important']
{
	font-style:italic;
}
So for example this is important, this is a warning, and this is an important warning.