CODEWITHSUNDEEP
javascriptjquerycss
Sadaf Atif
Sadaf Atif

Reputation: 1

addClass() function not being applied to an ID

  <!DOCTYPE html>
     <head>
        <meta charset="UTF-8">
          <title>Working With DOM</title>
           <script src="jquery.js"></script>
          <script type="text/javascript">

      $(document).ready(function()
        {
            $("#gold").addClass("highlight");
        });

        </script>
       <style type="text/css">
        body{background-color:#FFCC66;}
        #wrap
       {margin:0 auto;
       border:2px solid #CC8320;
        height:500px;}

       h1{font-style:italic;
       color:#A48713; padding-left:10px;}


         #gold{width:200px;
        background-color:#D49F55;
         height:150px; margin:20px; float:left;height:200px}

        input{border:1px solid black; width:150px; margin:0 20px;           
       background-color:#AA9F55; color:#553F00;font-weight:bolder;text-align:center; }

      .info{border:1px solid black; width:150px;background-color:#AA9F55;        color:#553F00;font-weight:bolder;text-align:center;margin:0 20px; }
     .highlight{background-color:green;}
       </style>
    </head>

 <body>
     <div id="wrap">
     <h1> Learning Web Engineering Online</h1>



        <div  data-price="399.99" id="gold">
            <h3>Gold Member</h3>
           <ul class="course">
             <li>HTML5</li>
             <li>css3</li>
             <li>jquery</li>
          </ul>
     <form>
        <input type="button" value="GET PRICE"/>
      </form>
   </div>
  </div>
</body>

I am having problem with the code above that when using jquery i add class highlight to element with id=gold and inspect it in chrome, although the class is being added to the code the style rule mentioned in highlight class doesn't output in browser. the element is being selected but not styled. what am i doing wrong please help someone.

Upvotes: 0

Views: 100

Answers (6)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The problem here is due to the precendence of CSS selectors. An id selector will override a class selector, so you need to either make the class selector more specific (preferred method):

#gold.highlight { background-color: green; }

Example fiddle

Or aleternatively add !important to it:

.highlight { background-color: green !important; }

However the latter can lead to issues when you have competing !important rules, so it's best to avoid it where possible.

Upvotes: 1

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

You need to change the priority style for .highlight. Just add #gold before the .highlight style

#gold.highlight{background-color:green;}

Upvotes: 1

Voonic
Voonic

Reputation: 4775

Id has greater precision due to conflict resolution, class css is overridden by your #gold id css

change your class

.highlight{background-color:green !important;}

Upvotes: 0

cocco
cocco

Reputation: 16706

change your css to 

#gold.highlight{background-color:green;}

Upvotes: 1

Jai
Jai

Reputation: 74738

You should use !important to work it:

.highlight{background-color:green !important;}

Note:

Browser uses ID with higher importance than a class name.

Upvotes: 1

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

highlight gets applied but as there is background-color property defined in ID it will not be overridden by class value.

As mentioned by @cocco you can use #gold.highlight to override it.

Upvotes: 0

Related Questions