CODEWITHSUNDEEP
javascriptjquerycss
jesse
jesse

Reputation: 145

jquery manipulate a tags with .css()

I need to change the font color of a div with the id name "nav" to white.

I did:

$("#nav").css("color","white");

This works for all the text that isn't wrapped in < a > tags but I need those changed too.

I tried adding:

$("a").css("color","white");

But that doesn't work. I also tried:

var changeAColor = document.getElementsByTagName("a")
$(changeAColor).css("color","white");

Any ideas appreciated.

Upvotes: 1

Views: 148

Answers (2)

AmbrosiaDevelopments
AmbrosiaDevelopments

Reputation: 2592

$('#nav, #nav a').css('color', 'white');

selects all the direct and indirect anchor tags in the #nav div.

$('#nav, #nav > a').css('color', 'white');

selects all the direct anchor tags in the #nav div.

Upvotes: 1

wsanville
wsanville

Reputation: 37516

The reason why $("#nav").css("color","white"); does not change the color of the links is because the selector in your stylesheet that styles the a tags is more specific than the inline style being applied to the div tag. You will notice the same effect if you were to add the following rule to your stylesheet, the links will not change: #nav { color: white }

That being said, the jQuery statement to change all of the text, including the links would be $('#nav, #nav a').css('color', 'white');

The only way I was able to reproduce your problem was if I had a style applied to a tags that used the important declaration, as in: a { color: #0000ff!important; }

That seems like a shot in the dark, but that's all I can think of for now...

Upvotes: 1

Related Questions