Using CSS Attribute Selectors to Stylize HTML | Style outbound links | Tutorial
Author: Evan Mullins | Filed under: tutorialIntro to CSS
We use css to apply styles to certain elements on the page, we can target any div like this:
HTML
1 | <div>Text</div> |
CSS
1 2 3 | div { css-property: value; } |
Any class selector <div class=”divClass”> like this:
HTML
1 | <div class="divClass">Text</div> |
with this:
CSS
1 2 3 4 5 6 7 | div.divClass { css-property: value; } <!-- or simply --> .divClass { css-property: value; } |
or any id selector, <div id=”divID”> like this:
HTML
1 | <div id="divID">Text</div> |
with this:
CSS
1 2 3 4 5 6 7 | div#divID { css-property: value; } <!-- or simply --> #divID { css-property: value; } |
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
1 2 3 | img [title] { border: 2px solid #000000; } |
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
1 2 3 4 5 6 7 | would style <img title="�MyImage�" src="http://blog.circlecube.com/wp-admin/�/images/sample.jpg�" alt="" /> or even <img title="�"" src="http://blog.circlecube.com/wp-admin/�/images/sample.jpg�" alt="" /> but not <img src="http://blog.circlecube.com/wp-admin/�/images/sample.jpg�" alt="" /> because it has no title attribute. |
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
1 2 3 | a[href="http://blog.circlecube.com"] { background-color: #EBEBEB; } |
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
1 2 3 4 5 6 7 | 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. |
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
1 2 3 4 5 6 7 8 9 10 11 12 | it would style <a href="�http://www.google.com�">This link</a> because it begins with ‘http://’ but not <a href="http://blog.circlecube.com/wp-admin/�/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. |
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
1 2 3 | a[title] { background-color:#0000FF; (blue) } |
HTML
1 | <a title="some title" href="http://blog.circlecube.com/">Link</a> |
2 equal: [attribute=x] equals x
target only anchors where the title attribute contains something exactly
CSS
1 2 3 | a[title="Only"] { background-color:#FF0000; (red) } |
HTML
1 | <a title="Only" href="http://blog.circlecube.com/">Link</a> |
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
1 2 3 | a[title^="Super"] { background-color:#00FF00; (green) } |
HTML
1 | <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a> |
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
1 2 3 | a[title$="ious"] { background-color:#FFFF00; (yellow) } |
HTML
1 | <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a> |
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
1 2 3 | a[title*="tic"] { background-color:#FF00FF; (magenta) } |
HTML
1 | <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a> |
6 tilde: [attribute~=x] one of which is exactly x.
a space-separated list of “words”, one of which is exactly x.
CSS
1 2 3 | a[title~="tic"] { background-color:#FF00FF; (magenta) } |
HTML
1 | <a title="Super cala fragalis tic expi ala dosious" href="http://blog.circlecube.com/">Link</a> |
7 pipe: [attribute|=x] which first word is exactly x.
a hyphen-separated list of “words”, first word is exactly x.
CSS
1 2 3 | a[title|="Super"] { background-color:#FF00FF; (magenta) } |
HTML
1 | <a title="Super-cala-fragalis-tic-expi-ala-dosious" href="http://blog.circlecube.com/">Link</a> |
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.
Anyway, I also made Parallax Effect in AS3, it’s pure AS3 class. And I...
