Stuck on adding/toggling a css class to an html element in jquery

Question

Hey guys I'm new to jQuery and having a ton of trouble making things on my own. I'm trying to change the styling of to the css class .change, but it isn't working. Really need some help. Thanks in advance.

$(document).ready(function() {
 $('#button').click(function() {
  $(this).addClass('change');
 })
})

html body {
 margin:0;
 padding:0;
 background-color:#3366CC;
}
.main .container {
 margin-top:0;
 text-align:center;
 padding:5%;
}
.main h1 {
 color:white;
 font-size:100px;
 text-transform:uppercase;
}
.main h3 {
 color:white;
 font-size:50px;
}
.main #button {
 color:white;
 background-color:red;
 padding:.5%;
 text-align:center;
 width:10%;
 font-size:25px;
 margin:auto; 
}
.change {
 background-color:black;
}

    <DOCTYPE!html>
<html>
 <head>
        <title>Community-Help yours today</title>
        <link rel='stylesheet' type='text/css' href='community.css'/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type='text/javascript' src='community.js'></script>
 </head>
 <body>
  <div class="main">
   <div class="container">
    <h1>Community</h1>
    <h3>Start an initiative, gain support, build your project</h3>
    <div id="button">Get Started</div>
   </div>
  </div>
 </body>
 </html>

Toni Leigh · Answer 1 · 2015-09-30T09:17:34.107

You'd be best off doing this:

.button {
    color:white;
    background-color:red;
    padding:.5%;
    text-align:center;
    width:10%;
    font-size:25px;
    margin:auto;    
}
.button--changed {
    background-color:black;
}

Add a class for the css directly to the button.

Then toggling the .button-changed class. This keeps your specificity down and you won't encounter similar problems further down the line.

By adding more specificity, such as by doing .main #button.changed you just defer the same problem further down line. Imagine if you then need to add a second changed state for some reason?

Also, you don't now have to contain your .button within main in order to use it's styles and by using a class you can validly re-use the button on the page, but these are bonus point.

Here are some references to further explain ...

http://www.impressivewebs.com/css-specificity-irrelevant/

http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/

That's incredibly helpful thank you! After reading those articles, my conclusion is I should really only use the class selector yeah? — Caed Budris, Sep 30 '15 at 17:37
it's a good rule of thumb, personally this is the sort of approach i take to using css: [here](http://stackoverflow.com/questions/30498946/are-smacss-bem-and-oocss-not-as-portable/31147366#31147366) and [here](http://stackoverflow.com/questions/31098498/what-is-the-best-approach-for-css-framework-of-an-enterprise-cloud-application/31300256#31300256) — Toni Leigh, Sep 30 '15 at 19:54

Rohit Azad Malik · Answer 2 · 2015-09-30T06:51:06.050

try to this css

.main #button.change {
    background-color:black;
}

because you used to this

.main #button {color:white;}

than click to button add class .change but class .change does not apply becuase you button id is more than power full you .change class

so that you can power full you class than used to this .main #button.change

Demo

$(document).ready(function() {
 $('#button').click(function() {
  $(this).toggleClass('change');
 })
})

html body {
 margin:0;
 padding:0;
 background-color:#3366CC;
}
.main .container {
 margin-top:0;
 text-align:center;
 padding:5%;
}
.main h1 {
 color:white;
 font-size:100px;
 text-transform:uppercase;
}
.main h3 {
 color:white;
 font-size:50px;
}
.main #button {
 color:white;
 background-color:red;
 padding:.5%;
 text-align:center;
 width:10%;
 font-size:25px;
 margin:auto; 
}
.main #button.change {
 background-color:black;
}

    <DOCTYPE!html>
<html>
 <head>
        <title>Community-Help yours today</title>
        <link rel='stylesheet' type='text/css' href='community.css'/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type='text/javascript' src='community.js'></script>
 </head>
 <body>
  <div class="main">
   <div class="container">
    <h1>Community</h1>
    <h3>Start an initiative, gain support, build your project</h3>
    <div id="button">Get Started</div>
   </div>
  </div>
 </body>
 </html>

and used to toggleclass

more specificity is not really the best solution – Toni Leigh Sep 30 '15 at 06:55 — Toni Leigh, Sep 30 '15 at 06:55

score 0 · Answer 3 · answered Sep 30 '15 at 06:48

.change style is being overridden by .main #button style that's why the black background color is not being applied. You will see that it is being overridden from the developer tools. I suggest you read more about Specificity on CSS: https://css-tricks.com/specifics-on-css-specificity/

score 0 · Answer 4 · answered Sep 30 '15 at 06:53

0

Change .change to #button.change to make this as high priority than #button

Like this :

#button.change {
    background-color:black;
}

And use toggleClass instead of addClass to have toggle effect.

Demo URL

answered Sep 30 '15 at 06:53

RAN

1,443
3
19
30

lowering the priority of what you are trying to over-ride should always be the first port of call in css – Toni Leigh Sep 30 '15 at 07:00

Stuck on adding/toggling a css class to an html element in jquery

4 Answers4