CODEWITHSUNDEEP
javascriptjqueryhtmlcssstyling
user2319760
user2319760

Reputation:

How to style specific a tag

I have a lot of links look something like this:

<a href="http://www.youtube.com/user/nigahiga">Youtube</a>
<a href="http://pinterest.com/pin/41236152807615600/">Pinterest</a>
<a href="https://www.facebook.com/manchesterunited">Facebook</a>
<a href="http://www.youtube.com/user/RayWilliamJohnson">Youtube</a> 
<a href="http://pinterest.com/pin/24910604158520050/">Pinterest</a>

How can I style only the hyperlinks that will be linked to pinterest. I tried this:

$('a').attr('href').contains('pinterest').css('Styling here');

But it does not work. How to achieve it?

Upvotes: 3

Views: 152

Answers (5)

newbie24x7
newbie24x7

Reputation: 3

You should check every a's href attr value.

$('a').each(function(){

if($(this).attr('href').contains('pinterest'))

$(this).css (your style);

});

Upvotes: 0

Deep Sharma
Deep Sharma

Reputation: 3483

  $('a[href*="pinterest"]').css('apply styles');

Selector documentation can be found at http://docs.jquery.com/Selectors

For attributes:

= is exactly equal
!= is not equal
^= is starts with
$= is ends with
*= is contains

Upvotes: 1

musefan
musefan

Reputation: 48455

Alternatively to the attribute contains solution (although not as neat), you could also use the filter function:

$('a').filter(function () {
    return $(this).attr("href").indexOf("pinterest") != -1;
}).css('color', 'red');

Here is a working example

Upvotes: 0

acj
acj

Reputation: 134

You can get all the hyperlinks linked to pinterest using the next selector:

$('a[href^="http://pinterest.com/"]')

That selector will return all the 'a' elementas where 'href' attribute starts with http://pinterest.com/

Then you can style them

Upvotes: 0

Eli
Eli

Reputation: 14827

You can use attribute contains selector:

$('a[href*="pinterest"]').css('color','DeepSkyBlue');

or better just need pure css:

a[href*="pinterest"] {  
    color: DeepSkyBlue;
}

Fiddle

Upvotes: 10

Related Questions