homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

boolean logic in CSS
how does this work/where can I find out more about this?

 5:02 am on Jan 27, 2008 (gmt 0)

I've been using CSS for a while now, but I just recently found out you can use some boolean operators. For instance:

a:not([href^='http://example.com/]) {

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.



 2:03 am on Jan 28, 2008 (gmt 0)

Yeah.. they're called attribute selectors. I know they don't work in earlier versions of IE but not sure about 7.

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



 3:24 pm on Jan 28, 2008 (gmt 0)

hey, thanks for your response.

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.

a:not([href^='http://example.com/']) {
<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>

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]


 4:32 pm on Jan 28, 2008 (gmt 0)

Very interesting.. I only use attribute selectors for exact matches, but I was thinking you could include regular expressions.

If you find any documentation, please post here. Thanks.


 4:47 pm on Jan 28, 2008 (gmt 0)

6.6.7. The negation pseudo-class [w3.org]

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


 5:23 pm on Jan 28, 2008 (gmt 0)

Oh, sorry my code is wrong, should not have the colon after the 'a'

a[href*="http://"] {background: red;}
a[href*="example.com"] {background: blue;}

but I just checked it and IE7 works :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved