Welcome to WebmasterWorld Guest from 54.197.94.141

Forum Moderators: not2easy

Message Too Old, No Replies

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)

5+ Year Member



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/]) {
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.

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

10+ Year Member



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

[w3.org...]

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

5+ Year Member



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.

<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]

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

10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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 :)