How will I change CSS based on classes and id using jQuery

Question

I have the following html. How would I change the css for inner div that is within the outer div with id 'outerDiv1' and a class called Class1 is applied to outer div? In the page, there are multiple such outerdiv/innerdiv combinations, but in each case the outer div has a different id.

HTML

<div class="Class1 Class2" id="outerDiv1" >
   <div class="raDiv" style="position: fixed; background-position: 420px 427px;></div>
</div>

<div class="Class1 Class2" id="outerDiv2" >
   <div class="raDiv" style="position: fixed; background-position: 420px 427px;></div>
</div>

I tried the following jQuery code, but it doesn't seem to work.

jQuery to change a specific inner div CSS

$("#outerDiv1 .Class1 .raDiv").css("backgroundPosition", "420px 600px");

just remove the .Class1 as it is not inside #outerDiv1 or remove the space between #outerDiv1 and .Class1 as #outerDiv1.Class1. Also make sure you are doing things after document.ready — Lekhnath
– Lekhnath, Commented Apr 17, 2014 at 4:43

Adil · Accepted Answer · 2014-04-17 04:52:35Z

3

The ID of element is supposed to be unique so do not use the class selector with outerDiv1

Use descendant selector most suitable when child could be n level down in hierarchy.

$("#outerDiv1 .raDiv").css("backgroundPosition", "420px 600px");

Or As .raDiv is direct child of #outerDiv1 you can use parent-child selector

$("#outerDiv1 > .raDiv").css("backgroundPosition", "420px 600px");

Edit The problem with the selector keeping aside if this is good approach or not, is the space between id and class as space will make it descendant selector and look for .Class1 in descendants. Your could will work by removing space between id outerDiv1 and class Class1

$("#outerDiv1.Class1 .raDiv").css("backgroundPosition", "420px 600px");

edited Apr 17, 2014 at 4:52

answered Apr 17, 2014 at 4:33

Adil

148k25 gold badges217 silver badges207 bronze badges

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

3 Comments

Sunil Over a year ago

Thanks. But I found that by excluding a blank between id and class at same level, it works. So this works: $("#outerDiv1.Class1 .raDiv").css("backgroundPosition", "420px 600px"). The only difference is I have removed the blank between the id and class for the same level element.

Adil Over a year ago

Yes you can combine id and class selector like that. I would not use that as when I can get the element with id I wont another selection criteria of class. That is why I told you to use only id selector without class selector.

Sunil Over a year ago

You mean your first and second solutions will be faster than the third approach?

Jeyarathnem Jeyachanthuru · Accepted Answer · 2014-04-17 04:36:06Z

1

You can use from parent div -->

#outerDiv1 .raDiv {
  background-position:420px 600px;
} 


#outerDiv2 .raDiv {
  background-position: 0 0;
}

Using Jquery ;

$("#outerDiv1 .raDiv").css("backgroundPosition", "420px 600px");

USER ISSUE. //$("#outerDiv1 .Class1 .raDiv") - This means

<div id="outerDiv1">
  <div class="class1">
    <div class="raDiv"></div>
  </div>
</div>

answered Apr 17, 2014 at 4:36

Jeyarathnem Jeyachanthuru

1,19910 silver badges21 bronze badges

Comments

AB Vyas · Accepted Answer · 2014-04-17 04:38:33Z

1

Agree with Adil's Answer you can also do with this also.

$('#outerDiv1').find('.raDiv').css("backgroundPosition", "420px 600px");

OR

$('#outerDiv1 > raDiv').css("backgroundPosition", "420px 600px");

OR

$('#outerDiv1').children().css("backgroundPosition", "420px 600px");

answered Apr 17, 2014 at 4:38

AB Vyas

2,3896 gold badges26 silver badges43 bronze badges

Comments

Rana · Accepted Answer · 2014-04-17 05:00:40Z

1

Three ways to do that:-

1) $("#outerDiv1.Class1 .raDiv").css("backgroundPosition", "420px 600px");

2) $("#outerDiv1 .raDiv").css("backgroundPosition", "420px 600px");

3) $("#outerDiv1 > .raDiv").css("backgroundPosition", "420px 600px");

answered Apr 17, 2014 at 5:00

Rana

3242 silver badges8 bronze badges

Comments

sideroxylon · Accepted Answer · 2014-04-17 04:36:18Z

0

If you want a generic solution for the first child div of the outerDivs, try this:

$('#outerDiv1 > div').css("backgroundPosition", "420px 600px");

answered Apr 17, 2014 at 4:36

sideroxylon

4,4261 gold badge25 silver badges42 bronze badges

Comments

Wemee · Accepted Answer · 2014-04-17 04:42:31Z

0

no blank in each id and classes, and blank for parent descendant

$("#outerDiv1.Class1 .raDiv").css("backgroundPosition", "420px 600px");
       //no blank  //a blank

$("#outerDiv1.Class1) // a element with #outerDiv1 and .Class1
$("#outerDiv1.Class1 .raDiv) // a element with .raDiv descendant under #outerDiv1.Class1

edited Apr 17, 2014 at 4:42

answered Apr 17, 2014 at 4:36

Wemee

414 bronze badges

2 Comments

Sunil Over a year ago

Could you explain or provide a link for 'blank for parent descendant'? Does it mean that the Class1 would be a child of outerDiv1 if a blank is included?

Sunil Over a year ago

Excellent. I hope I could give you a million points. You told me something great. Following your rule for excluding a blank if at the same level, then it works perfectly. This works: $("#outerDiv1.Class1 .raDiv").css("backgroundPosition", "420px 600px")

Collectives™ on Stack Overflow

How will I change CSS based on classes and id using jQuery

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related