Apply Multiple CSS classes on an HTML element (jQuery addClass)

Question

Given this HTML:

<html>
<head>
  <style type="text/css">
    tr.Class1
    {
      background-color: Blue;
    }
    .Class2
    {
      background-color: Red;
    }
  </style>
</head>
<body>
  <table>
    <tr id="tr1">
      <td>Row 1</td>
    </tr>
    <tr id="tr2">
      <td>Row 2</td>
    </tr>
  </table>
</body>
</html>

Below is the script secion. What will happen when I click on the first row? Will it remain blue, or will it turn red? If it will remain blue, how do I get it to turn red instead WITHOUT removing the Class1 class from the row (so I can remove the Class2 class later and the row will return to its original color of blue)?

<script type="text/javascript" language="javascript">

  $(document).ready(function() {
    $("#tr1").addClass("Class1");

    $("tr").click(function() {
      /* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */

      $(".Class2").removeClass("Class2");
      $(this).addClass("Class2");
    });
  });

</script>

Edit I should say - I tried this, and it's not working as expected (in either FireFox or IE). What is going on?

It turns red for me, as expected, given your code above. If it's not working for you, you've got other code or rules interacting that we can't see. — bobince
– bobince, Commented Apr 16, 2009 at 16:27

Adam Haile · Accepted Answer · 2009-04-16 15:37:03Z

1

It should turn red...that's why it's called cascading style sheets...new additions to the properties override older ones.

answered Apr 16, 2009 at 15:37

Adam Haile

31.5k62 gold badges198 silver badges291 bronze badges

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

1 Comment

Brandon Montgomery Over a year ago

I know, but I'm not getting that behavior.

Brandon Montgomery · Accepted Answer · 2009-04-16 15:43:28Z

1

Mozilla says here:

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

But this isn't the behavior I'm getting.

answered Apr 16, 2009 at 15:43

Brandon Montgomery

6,9853 gold badges50 silver badges71 bronze badges

Comments

thirsty93 · Accepted Answer · 2009-04-16 16:00:29Z

0

try this:

 $("tr").click(function() {
  /* clicked tr's should use the Class2 class to indicate selection, but only one  should be selected at a time */

  $(".Class2").removeClass("Class2");
  $(this).toggleClass("Class1");
  $(this).addClass("Class2");
  $(this).toggleClass("Class1");
});

I don't know if it will work but maybe it will give you more into the problem.

answered Apr 16, 2009 at 16:00

thirsty93

2,6626 gold badges26 silver badges26 bronze badges

Comments

Brandon Montgomery · Accepted Answer · 2009-04-16 17:09:15Z

-1

Figured it out. I put my example up a little incorrectly. The CSS actually looked like:

tr.Class1
{
  background-color: Blue;
}
.Class2
{
  background-color: Red;
}

Therefore, the most specific rule applies, just like Mozilla told me here:

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

answered Apr 16, 2009 at 17:09

Brandon Montgomery

6,9853 gold badges50 silver badges71 bronze badges

Collectives™ on Stack Overflow

Apply Multiple CSS classes on an HTML element (jQuery addClass)

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related