can't set color using jQuery

Question

I've started learning jQuery and I was trying to set the color of a tr but unable to do so. However, I'm able to successfully update other css attribute e.g. font-style. From what I've learnt so far to set the CSS property and value we use:

$(selector).css(property,value)

So, please point out the error.

HTML:

<table class="csr">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>

<table class="aTable">
<tr><td>Row 11</td></tr>
<tr><td>Row 22</td></tr>
<tr><td>Row 33</td></tr>
</table>

CSS:

td {
    color: blue;
    font-weight: bold;
  }

table.aTable td{
    color: red;
    font-weight: bold;
  }

jQuery:

$( "tr:first" ).css( "font-style", "italic" );
$( "tr:first" ).css( "color", "red" );
$( "tr:first" ).css( "background-color","yellow" );

$( ".aTable tr:first" ).css( "font-style", "italic" );
$( ".aTable tr:first" ).css( "background-color","yellow" );

Your code looks valid, could you try official example? Maybe try step-by-step modifications and watch for differences :) api.jquery.com/first-selector — petrbel
– petrbel, Commented Oct 31, 2014 at 7:13
You change tr color to red, but td still has blue color set. — Justinas
– Justinas, Commented Oct 31, 2014 at 7:14
@Justinas thnx changing to $( "td:first" ).css( "color", "red" ) did the job — KNU
– KNU, Commented Oct 31, 2014 at 7:15
Your code works perfectly fine. Are you including a link to jQuery? — Weafs.py
– Weafs.py, Commented Oct 31, 2014 at 7:15
@chipChocolate.py yes jQuery 2.1.0. moreover I want my first row of first table to be red — KNU
– KNU, Commented Oct 31, 2014 at 7:16

MiltoxBeyond · Accepted Answer · 2014-10-31 07:15:00Z

3

You are applying the css attributes to the TR which is later overwritten by the TD which is a subelement so appears on top of the TR.

Also you can combine your css like so:

$('tr:first td').css({
           'font-style':'italic',
           'color':'red',
           'background-color':'yellow'}
);

$('.aTable tr:first td').css({
           'font-style':'italic',
           'background-color':'yellow'}
);

And technically the first selector also catches the second table's first row.

answered Oct 31, 2014 at 7:15

MiltoxBeyond

2,7511 gold badge16 silver badges14 bronze badges

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

Comments

lapin · Accepted Answer · 2014-10-31 07:14:34Z

2

This is because of CSS priority, the color is applying to tr, which means that the td { color:blue } is heavier and thus applies. Applying the style to the td inside the tr is one possible solution :

$( "tr:first td" ).css( "color", "red" );

See the jsfiddle.

answered Oct 31, 2014 at 7:14

lapin

2,1583 gold badges22 silver badges32 bronze badges

Comments

Amit · Accepted Answer · 2014-10-31 07:16:06Z

0

You need to set as below:

$( "tr:first>td" ).css( "color", "red" );

DEMO

answered Oct 31, 2014 at 7:16

Amit

15.4k8 gold badges50 silver badges69 bronze badges

Collectives™ on Stack Overflow

can't set color using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest