Using CSS Attribute Selectors to Stylize HTML | Style outbound links | Tutorial

Intro to CSS

We use css to apply styles to certain elements on the page, we can target any div like this:

HTML

CSS

Any class selector <div class=”divClass”> like this:

HTML

with this:

CSS

or any id selector, <div id=”divID”> like this:

HTML

with this:

CSS

These are the basics of css. Use an element tag name to target it, use a dot to access class names and a hash (#) to represent id names. A lot can be done with just that, but sometimes you may want to access something differently, an option is to use attribute selection.

Overview

More advanced we can apply styles to elements based on their attributes. Attribute selectors use the attributes of the tag.
We can use attribute selection to specify certain elements to stylize. For example if we have a page with many images but only certain ones have title attributes, which we want to stand out more, this css rule would do the trick:

CSS

It would cause any image with a title tag (no matter what the value of the title tag is) to have a 2px wide solid black border, such as <img title=”MyImage” src=”/images/sample.jpg” /> or <img title=”" src=”/images/sample.jpg” /> but not <img src=”/images/sample.jpg” /> because it has no title attribute.

HTML

Further we can specify which values of the title attribute we want to target. If we want to stylizee links to a certain site we can do this: a[href="http://blog.circlecube.com"] { }

CSS

it would style <a href=”http://blog.circlecube.com”>This link</a> but not <a href=”http://blog.circlecube.com/2008/05/21/”>this one</a> because it is not an exact match, nor <a href=”http://www.google.com”>this one</a> because it isn’t a match either, or at all.

HTML

For another example, if we want to stylize local links differently than absolute links, we’d want to look at the beginning of the attribute’s value only so we’d use ‘^=’. We could have something like this:
a[href^="http://"], a[href^="https://"] {
background: url(/images/external.gif) no-repeat right center;
padding-right:20px;
}
it would style <a href=”http://www.google.com”>This link</a> because it begins with ‘http://’ but not <a href=”/2008/05/21/”>this one</a> because it is does not begin with ‘http://’. But it would also style <a href=”https://paypal.com”>this</a> because it matches the selector after the comma ‘https://’, and even <a href=”http://blog.circlecube.com/2008/05/21/”>this</a> will be styled, because the link is absolute (even though it is local) so be careful with how you use it.

HTML

Summary

Hoping you will see the pattern and can use the rest of these somehow (I’m drawing blank on interesting examples),

1 is: [attribute] exists

target anchors with any titles attributes.

CSS

HTML

2 equal: [attribute=x] equals x

target only anchors where the title attribute contains something exactly

CSS

HTML

3 hat: [attribute^=x] starts with x

target instances where something comes at the beginning of the attribute. This can prefix a word or even be the first word in a phrase or sentance.

CSS

HTML

4 dollar: [attribute$=x] ends with x

instances where something comes at the end of the attribute. This can be the suffix of the word or the last word in a phrase.

CSS

HTML

5 asterisk: [attribute*=x] contains x

or even titles which contain a certain word somewhere/anywhere in the attribute. This wildcard be anywhere, in a word, as a word, whatever.

CSS

HTML

6 tilde: [attribute~=x] one of which is exactly x.

a space-separated list of “words”, one of which is exactly x.

CSS

HTML

7 pipe: [attribute|=x] which first word is exactly x.

a hyphen-separated list of “words”, first word is exactly x.

CSS

HTML

view all examples on this page.
refer to w3 for more

Let me know what you come up with or if I’ve left out any essentials.