- 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']
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:']
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']
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']
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.
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
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:
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:
So for example this is important, this is a warning, and
this is an important warning.