Change color of href links based on their domain names in css

Question

I would like to give different color to different external links using just CSS.

For example, we have few external links:

<a href="http://stackoverflow.com">StackOverflow</a>
<a href="http://example.edu">home page</a>

I want to give different colors to links based on their domain names(.edu, .org, .com etc.)

Possible duplicate of [CSS rule based on content](http://stackoverflow.com/questions/1777357/css-rule-based-on-content) — Roshan Bhumbra, Sep 21 '16 at 20:10
Note that the 'domain names' are 'stackoverflow.com' and 'example,edu' what you're referring to is the 'TLD' (top level domain), the 'com' and 'edu' part. — David Thomas, Sep 21 '16 at 20:20

DaniP · Accepted Answer · 2016-09-21T20:23:58.643

You can use an attr selector like this:

a[href$=".com"] {
  color: red;
}
a[href$=".edu"] {
  color: purple;
}

<a href="http://stackoverflow.com">StackOverflow</a> 
<a href="http://example.edu">home page</a>

In this case we can use $ as filter:

[attr$=value]

Represents an element with an attribute name of attr and whose last value is suffixed by "value".

1 Answers1