Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rules for multiple rel attribute values not applied

    On my sites, I've got a CSS rule like so:

    Code:
    a[rel=external] { ... apply background image icon to signify that this link will leave the site ...}
    Now, if this external link also happens to be, say, a colleague of mine then the markup might look like this:

    Code:
    <a href="foo.com" rel="external colleague">foo</a>
    Now(now), ignoring that it is likely a bit superfluous to mark external links as external(The jury is still out for me), what I've experienced is that if the rel attribute simply says "external", the CSS rule above will always be applied. If there are any other values, it does not apply the rule for that or any other value of the rel attribute.

    So my question is... wtf? What do I need to know about CSS and/or browser support for this type of thing that I don't currently? Can the attribute selectors only select the whole string of text contained within? I guess I assumed that they behaved in the same way multiple classes work.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a[rel~="external"]

    Description of this and others like it here:
    http://www.w3.org/TR/REC-CSS2/selector.html

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>45350</title>
    		<style type="text/css">
    			a[href*="http://"]	{
    				background-color:#f00;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="http://google.com/">External link</a>
    	</body>
    </html>

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, good thinking heme! But we can't be certain that all external resources will be accessed using HTTP. It's most likely this will be the case, yes, but not necessarily.

    Too bad CSS doesn't support regular expressions or something...

    But I like what you're on to there, I might play with that..

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perhaps I have once again been overthinking this and it is as simple as not specifying rel="external" and using this CSS rule:

    a[rel] { ... }

    I am trying to think of what other reason you might have a rel value other than to indicate a relationship to a resource outside the current domain... seems like a good approach at a glance...

    Haha... well, after changing my stylesheet to reflect that, I remember that WordPress uses the rel attribute to mark permalinks as "bookmark"... so... crud...
    Last edited by ]|V|[agnus; 09-29-2004 at 11:09 PM.

  • #7
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've used http:// on internal links.

    I have a wildcard DNS setup on a site I've got going on for a client, and it's accessible via username.domain.com and domain.com. They both take you to the root, but I use PHP/mod_rewrite to extract the username, bounce it off the database, and proceed with that. Internal link so the top-level site need http://, otherwise the username gets sent and weird things happen. http://username.domain.com/contact and http://domain.com/contact are very different pages.

    So just giving an example of when a[href*="http://"] would not be of much use.

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think using

    a[rel] {...}

    to mark my generic external links will work fine, and then rules like

    a[rel~=bookmark] {...}

    to override it is a smart way to go at this juncture. I'm definitely sick of typing "rel='external'" in blog entries...

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well you could just tell your blog to parse your input.

    <a href="..."+>link text</a>

    And have the + signify an external link, or something weird like that. Heh. Would save you typing, and the markup would be as clear (rel="external" is pretty clear... Clearer than just rel="", anyway).

    Come to think of it, will CSS select an attribute if it's empty? Will have to test that.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    owwww... my head is hurting with all the CSS talk I don't understand.
    Any recommended additional reading on this topic to help get a better understanding? (please don't say w3c.org... I mean for regular schmoes like me)

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quite honestly I learned most of what I know by reading w3school's CSS reference page. It made me aware of what I could do with CSS, and from there I just played around a lot until I got the hang of things.

    You'll find links and tutorials at www.glish.com/css/ , which I think is one of the best sites to visit. www.alistapart.com is fun to read when you've got the jist of things.

  • #12
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    Any recommended additional reading on this topic to help get a better understanding?
    Hey Rich I reckon this will be right up your alley: http://www.westciv.com/style_master/...rial/advanced/
    ..and this : http://nemesis1.f2o.org/aarchive?id=6
    ...and to a lesser extent, this: http://htmldog.com/guides/cssadvanced/

    I found the first two in a search for advanced css

    I take no responsibility for the above nonsense.


    Left Justified

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Aaron: thanks for the links... I actually have a handle on most of their topic material, it's the advanced stuff that's bugging me out...

    Andrew: ahhhh, perfect. Thanks for the reading

    <off-topic>I just noticed I'm now a CF "Addict"... do I get a prize or anything? </off-topic>

  • #14
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Welcome mate
    Only 700 more posts and they show you the handshake

    I take no responsibility for the above nonsense.


    Left Justified

  • #15
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    W3Schools follows the same principals as the W3C when you get into the advanced things (such as this). Basically, W3Schools lays down the foundation (W3C doesn't), and then lets you experiment. Once you wish to further your knowledge, you can read the more technologically descriptive things at the W3C site. You really have to know CSS (you cannot simply look at it and say "Okay, I know what it does." without experimenting) as well as have a good vocabulary (or an online dictionary to use) to understand the terms used.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •