Styling links with attribute selectors

I wanted to visually indicate which links are internal to my site, and
which are external. I also wanted to indicate whether any links used a
less common protocol on the web, such as ftp (not sure there are any
other I am likely to encounter). Targeting the first term in the link
with an attribute selector seems to work (in browsers supporting it).

/* Style our links with special colour for external or ftp */
a:link {color: #00ff00;}
a[href^="http://"] {color: #8888ff; }
a[href^="https://"] {color: #8888ff; }
a[href^="ftp://"] {color: #880000; }
a:visited {color: #4444cc;}
a:hover {color: #0000ff;}
a:active {color: #ff0000;}

What I can not figure out is how I could extend this sort of scheme to
allow an alternate but similar set of visual indications to the type of
visited links. Any suggestions?

--
http://www.ericlindsay.com

On Tuesday 20 January 2009 23:50, Eric Lindsay wrote:

I wanted to visually indicate which links are internal to my site, and
which are external. I also wanted to indicate whether any links used a
less common protocol on the web, such as ftp (not sure there are any
other I am likely to encounter). Targeting the first term in the link
with an attribute selector seems to work (in browsers supporting it).

/* Style our links with special colour for external or ftp */
a:link {color: #00ff00;}
a[href^="http://"] {color: #8888ff; }
a[href^="https://"] {color: #8888ff; }
a[href^="ftp://"] {color: #880000; }
a:visited {color: #4444cc;}
a:hover {color: #0000ff;}
a:active {color: #ff0000;}

What I can not figure out is how I could extend this sort of scheme to
allow an alternate but similar set of visual indications to the type of
visited links. Any suggestions?

Do you have to parse it automatically? Anything against giving your links
themselves a class in the HTML (<a class="external" href="whatever">) and
styling that class?

Irina
--
"Of course it is happening inside your head, Harry, but why on earth
should that mean that it is not real?" --Albus Dumbledore
http://www.valdyas.org/foundobjects/index.cgi Latest: 21-Jan-2009

Am 20.01.2009, 23:50 Uhr, schrieb Eric Lindsay
<NOwebmasterSPAM (AT) ericlindsay (DOT) com>:

a[href^="http://"] {color: #8888ff; }

[…]

What I can not figure out is how I could extend this sort of scheme to
allow an alternate but similar set of visual indications to the type of
visited links. Any suggestions?

You may combine attribute selectors with pseudo classes:

a[href^="http://"]:visited {color: #4488ff; }

Thomas

--
http://toscho.de

In article <op.un3wr4o6i9caq2 (AT) toscho (DOT) de>,
"Thomas Scholz" <p1 (AT) toscho (DOT) de> wrote:

Am 20.01.2009, 23:50 Uhr, schrieb Eric Lindsay
NOwebmasterSPAM (AT) ericlindsay (DOT) com>:

a[href^="http://"] {color: #8888ff; }

[…]

What I can not figure out is how I could extend this sort of scheme to
allow an alternate but similar set of visual indications to the type of
visited links. Any suggestions?

You may combine attribute selectors with pseudo classes:

a[href^="http://"]:visited {color: #4488ff; }

Wonderful! That is exactly what I wanted to know. It seems so obvious
now. That should be perfect. I didn't manage to Google an example, and
was on the wrong track in my own trial. Thanks very much Thomas.

--
http://www.ericlindsay.com

In article <4976f8d2$0$194$e4fe514c (AT) news (DOT) xs4all.nl>,
Irina Rempt <irina (AT) valdyas (DOT) org> wrote:

On Tuesday 20 January 2009 23:50, Eric Lindsay wrote:

I wanted to visually indicate which links are internal to my site, and
which are external. I also wanted to indicate whether any links used a
less common protocol on the web, such as ftp (not sure there are any
other I am likely to encounter). Targeting the first term in the link
with an attribute selector seems to work (in browsers supporting it).

/* Style our links with special colour for external or ftp */
a:link {color: #00ff00;}
a[href^="http://"] {color: #8888ff; }
a[href^="https://"] {color: #8888ff; }
a[href^="ftp://"] {color: #880000; }
a:visited {color: #4444cc;}
a:hover {color: #0000ff;}
a:active {color: #ff0000;}

What I can not figure out is how I could extend this sort of scheme to
allow an alternate but similar set of visual indications to the type of
visited links. Any suggestions?

Do you have to parse it automatically? Anything against giving your links
themselves a class in the HTML (<a class="external" href="whatever">) and
styling that class?

Styling by class is what I have done in the past. It just seemed to me
to look a little messy in my HTML. All those extra classes. Sort of like
a page infested by divs. I wanted pages with very simple HTML, even at
the expense of more complexity in the CSS. I write a fair amount of text
in HTML with a text editor, and the simpler the HTML, the more likely I
am to avoid errors.

The thing that led me to this was adding a PDF icon to links that
pointed to a PDF. I tend to cut and paste in the links, but it is really
easy to miss adding a class to indicate a PDF needs an icon. Until I
tried:

a[href$=".pdf"] {
background: url(pdf_icon.png) right center no-repeat;
padding-right: 20px;
}

Mainly, I wanted to learn how to use selectors with some precision and
ease. I am not very good at CSS, as yet. Only one CSS page per site
means I don't really work at CSS as often as I do HTML.

--
http://www.ericlindsay.com