logo       

RE: Text-decoration in :after content: msg#01249

Subject: RE: Text-decoration in :after content
At 09:59 AM 9/29/2002, Eric A. Meyer digitized these thoughts:
At 18:01 -0700 9/28/02, Moira Burke wrote:
Is there some way to select all links EXCEPT linked images?

Not without adding a class to links that contain only images, or using some non-CSS Mozilla-only bits.

OK, so I tend to take statements like the above as a challenge... but I may have a somewhat theoretical and somewhat ridiculous solution to this one using CSS3 selectors (hence the "somewhat theoretical"):

  a[href] {
    text-decoration:   none;
    border-bottom:     1px solid #00f; /* link color */
  }

  a[href]::after {
    content:           " (" attr(href) ") ";
    border-bottom:     1px solid #000; /* background color */
  }

  /* Unwrap selector below */
  a[href]:not(:contains("a")):not(:contains("e")):not(:contains("i"))
         :not(:contains("o")):not(:contains("u")):not(:contains("y"))
         :not(:contains("A")):not(:contains("E")):not(:contains("I"))
         :not(:contains("O")):not(:contains("U")):not(:contains("Y"))
  {
    border-bottom: none;
  }

  /* Unwrap selector below */
  a[href]:not(:contains("a")):not(:contains("e")):not(:contains("i"))
         :not(:contains("o")):not(:contains("u")):not(:contains("y"))
         :not(:contains("A")):not(:contains("E")):not(:contains("I"))
         :not(:contains("O")):not(:contains("U")):not(:contains("Y"))
         ::after
  {
    content: ""; /* If you don't want the href after linked images */
  }

The last two rules would select a elements with an href attribute that don't contain any of the characters [aeiouyAEIOUY], and then overrides the properties set for all links in the first two rules that we don't want image links to have.

Of course, in order for these rules not to catch text links that don't contain vowels you'd have to basically reproduce the entire character set you're using in the :not(:contains()) pseudo-classes (hence the "somewhat ridiculous"), but I wanted to spare the list from that sort of download. :)

For me, simple, real-world examples like this one really underscore the need for some sort of mechanism for matching "upstream elements" instead of simply the last element in the selector chain.

- Porter


+--------------------------------------------------------+
| Porter Glendinning      mailto:porter@xxxxxxxxxxxxxxx  |
| Web/UI Commando                http://glendinning.org  |
+--------------------------------------------------------+
| Porter's Workshop - http://www.serve.com/apg/workshop/ |
+--------------------------------------------------------+


_______________________________________________
css-discuss [css-discuss@xxxxxxxxxxx]
http://three.pairlist.net/mailman/listinfo/css-discuss
Sponsored by www.westciv.com - CSS resources | software | learning



<Prev in Thread] Current Thread [Next in Thread>