Forum Moderators: not2easy
a:not([href^='http://example.com/]) {
background-color:red;
}
says for all 'a' tags where the 'href' field doesn't start with http://example.com/ make the background color red.
I haven't seen this used anywhere else and it seems like it'd be extremely useful if only I could figure out how to do a little more with it.
for instance, I'd love to expand this to 'a' tags where 'href' does not start with http://example.com/ OR / make the background color red.
for reference sake: I have only tested the above code in firefox.
The syntax is a bit off above. There isn't a ":not" as far as I know. Instead, you handle that within the brackets. You can find out more at
[w3.org...]
I read your post as well as your link and I don't think we're talking about the same thing (as far as I can tell, please correct me if I'm wrong). I'm aware of the attribute selectors, and as far as I can tell they have the ability to do "starts with" "ends with" and "contains" but do not contain logical/boolean abilities. Let me further my example.
<html>
<head>
<style>
a:not([href^='http://example.com/']) {
background-color:red;
}
</style>
</head>
<body>
<a href="http://example.com/">this one should be normal</a><br>
<a href="http://webmasterworld.com/">this one should be red</a><br>
<a href="http://www.webmasterworld.com/">this one should also be red</a><br>
<a href="http://example.com/example.html">this one should also be normal</a><br>
</body>
</html>
Please note, this works in firefox, this does not work in IE!
As far as I can tell, this is not possible without a logical operator.
Thanks again
[edited by: SuzyUK at 5:16 pm (utc) on Jan. 28, 2008]
[edit reason] delinked example URI's [/edit]
If you find any documentation, please post here. Thanks.
Unfortunately it's CSS3, the CSS3 selector module is one of the modules that is in the "last call" phase meaning and is nearly at candidate recommendation (final release) - Mozilla and Opera have fairly much implemented most of the advanced selectors already - IE is somewhat lacking, having only recently caught up with the CSS2 attribute selectors - so best not rely on these CSS3 additions for mission critical stuff
perhaps using the basic attribute selectors, making a positive rule, then overriding by a more specific one would work in IE as well? though if it does it will only be IE7
a:[href*="http://"] {background: red;}
a:[href*="example.com"] {background: blue;}
*= means "containing anywhere" in the attribute - and that's the bit I can't remember if IE7 supports either yet
a[href*="http://"] {background: red;}
a[href*="example.com"] {background: blue;}
but I just checked it and IE7 works :)
