Placeholder Placeholder - 10 days ago 8
CSS Question

Making every a href on my site a different color

Currently, I am doing this with just static CSS using something that looks like the code displayed below.

#main-content > article.mh-loop-item.clearfix.post-95.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-singles.tag-kxngg-jxnes-italy > div > header > h3 > a {
color: blue;
}
#main-content > article.mh-loop-item.clearfix.post-93.post.type-post.status-publish.format-standard.has-post-thumbnail.hentry.category-singles.tag-aquil-eddie-guerrero > div > header > h3 > a {
color: red;
}


And for each post ID it generates a different color for that songs title to appear as, how ever I'm trying to do something a bit more advanced with Javascript or something that when ever there's an a href with a certain class it generates a random color for that link to appear as.

Answer

It can be achieved by jquery as below

$(document).ready(function(){
  
  $('body a').each(function(){
    var color = 'rgb(' + randomNumber() + ',' + randomNumber() + ',' + randomNumber() + ')';
    $(this).css("color", color);
  });
  
  function randomNumber(){
    return Math.floor(256*Math.random());
  }
  
});
<a href="javascrip:void(0)">First link</a>
<a href="javascrip:void(0)">Second link</a>
<a href="javascrip:void(0)">Third link</a>
<a href="javascrip:void(0)">Fourth link</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>