dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Change link appearance depending on if link is external or internal?

  1. #1
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    396

    Question Change link appearance depending on if link is external or internal?

    Hi! This might be a question for scripting (like JavaScript), but I'd like to know if there's a convenient way to apply a style to a link if it's external and a separate style to it if it's internal?

    If I have a link like
    Code:
    <a href='/contact/staff'>Staff</a>
    I want it to be blue, and if it's
    Code:
    <a href='www.google.com' target='_blank'>Google</a>
    I want it to appear red. Can I do that?

    Thanks,
    M
    Last edited by multimediocrity; 11-29-2017 at 02:18 PM.

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    330
    not sure if this is ultimate answer. But the anchor A link could be "internal" (non-HREF)
    Code:
    a {color: blue; }
    then add link pseudo-classes, wherein a:link is HREF link
    Code:
    a:link {color: green;}
    a:visited {color: purple;}
    a:hover {color: red;}
    a:active {color: yellow;}

  3. #3
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    396
    Good thought, auntnini, but it won't work here, unfortunately.

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    330
    there is a distinction between <a> plain link as in "named links" such as <a href="#start" target="_top"> Go to start.</a> and www._______.com internet links, but i cannot find description right now.

  5. #5
    Join Date
    Dec 2017
    Location
    Swansea
    Posts
    4
    This is possible with the CSS attribute selector.

    If all your internal links on your website are relative (like href="./some/page.html"), then you can use this:

    Code:
    a { color: #00F; }
    
    a[href^="http://"], a[href^="https://"], a[href^="//"], {
        // style for an external link goes here
        color: #F00;
    }

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,536
    If you hover over a link, what do you see in the link information about that link? Yes, you see the whole URL including http:// or https:// in that URL.

    Having tried your suggestion myself, found it wouldn't work, what possibly would is if you discriminate by looking for local links to the site and anything else is coloured a different colour.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    330
    the distinction (i think) is <A> is for named links, like create <a name="internal" id="interal"> hit name</a> and then
    <a href="#internal"> Go to internal.</a> and psuedo link a:link does not include named links

    is that correct? would that work?

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,536
    Quote Originally Posted by auntnini View Post
    the distinction (i think) is <A> is for named links, like create <a name="internal" id="interal"> hit name</a> and then
    <a href="#internal"> Go to internal.</a> and psuedo link a:link does not include named links

    is that correct? would that work?
    name attribute of an anchor is no longer supported, the muppets decided to remove it from the element, why I don't know, maybe these stuffed shirts responsible for messing up HTML and JavaScript will be held accountable and put up against the wall and shot.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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