negation pseudo-class & attribute selectors

  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

I've been looking at the CSS3 :not() selector or negation pseudo-class.

I'm trying to style all the external links on an a page differently than the internal links. External links occur in paragraphs with the classname "foo", like so:

Code: [ Select ]
<p>A random <a href="../some_dir/">internal link</a></p>
<p class="foo">A random <a href="http://foo.bar">external link</a></p>
  1. <p>A random <a href="../some_dir/">internal link</a></p>
  2. <p class="foo">A random <a href="http://foo.bar">external link</a></p>



I tried making use of the negation pseudo-class:

Code: [ Select ]
a[href^="http://"]:not(.foo) {color: #000; text-decoration: underline;}



Also tried it with a descendant selector or a child selector thrown in, but to no avail:

Code: [ Select ]
p > a[href^="http://"]:not(.foo) {color:#000;font-weight:normal;text-decoration:underline;}

p a[href^="http://"]:not(.foo) {color:#000;font-weight:normal;text-decoration:underline;}
  1. p > a[href^="http://"]:not(.foo) {color:#000;font-weight:normal;text-decoration:underline;}
  2. p a[href^="http://"]:not(.foo) {color:#000;font-weight:normal;text-decoration:underline;}



Does the :not() selector not work when you use matching attribute selectors?


ps apologies in advance if I have butchered and misused any terminology (a bad habit of mine).

Post Information

  • Total Posts in this topic: 1 post
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.