Using jquery to change a css rule

Question

I have the following css rule:

.headerWrapperDiv3 a{
    color:#888;
}
.headerWrapperDiv3 a:hover {
    color:#444;
}

and the following markup:

<div class='headerWrapperDiv3'>
<ul class="nav90">
    <li><a href="index.aspx" pageCatID="3" >Home</a></li>
</ul>
</div>

and I'm using this jQuery to change the color of the link once the page loads:

$(function() {
    $("a[pageCatID=3]").each(function(){
        $(this).css("color", "#00ff00");
    });
});

The jquery finds the link ok but fails to change the color.

Your code seems to be working for me: jsfiddle

JRulle
– JRulle

2014-12-15 17:54:14 +00:00
Commented Dec 15, 2014 at 17:54 — JRulle
– JRulle, Commented Dec 15, 2014 at 17:54

RodrigoDela · Accepted Answer · 2014-12-15 17:54:23Z

2

Try this one (surround the value by single quotation marks):

$(function() {
    $("a[pageCatID='3']").each(function(){
        $(this).css("color", "#00ff00");
    });
});

answered Dec 15, 2014 at 17:54

RodrigoDela

1,73613 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amos Fox Over a year ago

Brilliant, thank you. There was me thinking I had a specifity problem!

Sleek Geek · Accepted Answer · 2014-12-15 18:10:41Z

2

Try the example below

 $(function() {
        $(".nav90 a").each(function(){
            $(this).css("color", "#00ff00");
        });
    })

Solution: As shown above, just target .nav90 and the a inside.

Note: If you want more specificity, adhere to the corrections made to your code by Rodrigo and you'll be just fine.

edited Dec 15, 2014 at 18:10

answered Dec 15, 2014 at 17:51

Sleek Geek

4,7063 gold badges29 silver badges42 bronze badges

2 Comments

JRulle Over a year ago

Given that the OP is building a nav, I would assume the <ul> will have additional <li>'s with more <a>'s in them... this would apply the change to all of the <a>'s within the <ul class="nav90">

Sleek Geek Over a year ago

Make a difference with page ID. it's that simple

Sani Huttunen · Accepted Answer · 2014-12-15 17:54:30Z

1

Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.

$("a[pageCatID='3']").each(function() {
  $(this).css("color", "#00ff00");
});

As you see you need to suround 3 with quotation marks.

answered Dec 15, 2014 at 17:54

Sani Huttunen

24.4k7 gold badges78 silver badges82 bronze badges

2 Comments

Sani Huttunen Over a year ago

@NiMa: It's an attribute selector. a[pageCatID='3'] selects all anchor elements with the attribute pageCatID set to 3.

Amos Fox Over a year ago

it finds the links with the attribute pageCatID set to the value of 3

vcanales · Accepted Answer · 2014-12-15 18:34:16Z

0

It's not necessary to use .each, selectors apply to every object:

$(function() {
    $("a[pageCatID=3]").css("color", "#00ff00");
});

Working example: http://jsfiddle.net/mu54yjn4/

UPDATE:

For more than one property:

$(function() {
    $("a[pageCatID=3]").css({
        "color": "#00ff00",
        "background-color": "#000"
    });
});

Working example: http://jsfiddle.net/zf6fjz0q/

edited Dec 15, 2014 at 18:34

answered Dec 15, 2014 at 17:58

vcanales

1,82816 silver badges20 bronze badges

1 Comment

Amos Fox Over a year ago

ok. now if i was to change more than just the color, ie background and font style as well would it be more efficient to use each rather than 3 selector commands?

Collectives™ on Stack Overflow

Using jquery to change a css rule

4 Answers 4

1 Comment

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

1 Comment

Related