CODEWITHSUNDEEP
javascripthtmlcss
Vincent Tang
Vincent Tang

Reputation: 4170

How to use JS to target specific domain html <a> links with CSS classes?

I use online note taking editors to take notes. One of them I'm using is called dynalist.io.

I run stylebot (chrome plugin) to apply specific CSS sheets to those pages

Normally when i put a URL link inside of my documents, I put two types:

I'd like to apply CSS styles on those <a href> tags seperately, however the program defaults the same class for all domain links so I cannot use CSS classes to achieve this

unless (to my knowledge) use javascript to target <a href> and make seperate classes for different domain links. Then apply CSS rules

Reference image:

How would I go about doing this?

edit: would I have to use greasemonkey to inject javascript?

Upvotes: 2

Views: 1403

Answers (2)

thejoin
thejoin

Reputation: 326

You can add the following rules at your css file (this is not efficient):

a[href^="http://i.imgur.com"] {
    color: red !important;
}

It is like a regexp, and it is not efficient for a standard css, but in your case... will be good.

EDIT: The !important is just to make sure you will overwrite other css rules. The regexp is not efficient (for big pages) because the css need to check all the <a> tag and make a control.

If you need to change the color of other links, you need to create the same rule but with another link.

Upvotes: 4

bini
bini

Reputation: 154

If I understood you correctly, you want to select all links who are from imgur and add a class to them.

You could do it like this:

Select all the a elements whose href attributes contains imgur.

var elements = document.querySelectorAll('a[href*="imgur"]');

Add the class 'sup' to them:

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].classList.add('sup');
}

Upvotes: 3

Related Questions