CODEWITHSUNDEEP
htmlcss
Νίκος Διαμαντόγιαννης
Νίκος Διαμαντόγιαννης

Reputation: 85

Different text-decoration on links using css

I am trying to use different text-decoration on the links of each page i create in html. What i did for the first one is:

a
{
    color: #0033AA;
    text-decoration: none;
}

Is there any way to separate this code for every page i create? I am not asking for solution like "use a class or id in every <a href... > " or "create different css files". Any ideas?

Upvotes: 0

Views: 137

Answers (5)

Nick Delaney
Nick Delaney

Reputation: 601

You could use jquery to do this.

var pathname = window.location.pathname; 
if(pathname == the_path_you_want){
  $('a').css('color','color-you-choose');
}

Upvotes: 0

Imran
Imran

Reputation: 4750

You can do so using nth child tricks of CSS.

  a:nth-child(1) {
    background: #ff0000;
}

Upvotes: 0

ferr
ferr

Reputation: 1217

Do you mean you want it to be url-specific? I.e. The a for cnn.com is blue and the a for espn.com is orange? Try this,

a[href='http://www.cnn.com'] {
    color:#0000ff;
}
a[href='http://www.espn.com'] {
    color:#ff0000;
}

Upvotes: 0

flafoux
flafoux

Reputation: 2110

You can use class :

css file :

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

html : 

<a class="one" href="defaultOne.html" target="_blank">first link</a>
<a class="two" href="defaultTwo.html" target="_blank">second link</a>

Upvotes: 0

bpeterson76
bpeterson76

Reputation: 12870

Something has to be different to key off of. Put in a container div, give each container a different class then specify your links as .container a:link for example.

CSS:

.homeContainer a:link {
   color: red;
}

.aboutContainer a:link {
   color: blue;
}

HTML

<div class="homeContainer">
  <p><a href="link">Link Here</a></p>
</div>

<div class="aboutContainer">
  <p><a href="link">Link Here</a></p>
</div>

Upvotes: 2

Related Questions