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


Tags: jquery,css

Problem :

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");


Solution :

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");

    CSS Howto..

    How to get a frame off animated png using CSS?

    HTML5 (php) with CSS Tooltip shows up far away from hyperlink

    How to make the background of my text larger?

    How to make a snowboard (or squeezed rectangle) shaped div in css?

    How to copy the CSS to another tab in Chrome?

    How to vertically align both image and text side by side in a div

    How to wrap or label all divs like files in opertaing systems (jQuery) [closed]

    How to handle CSS unable to load resource error

    In IE6, how to float item to right without clearing it?

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    How to read DOM in React

    How can I vertically align this navigation bar?

    How to position three divs horizontally

    How to make a centered, responsive CSS circle within a Boostrap div?

    Slideshow using MooTools JavaScript - How can I position slideshow to rescale in browser window

    How to define specific CSS rules for IE9 alone?

    How to get innerHTML of a node using scrapy Selector?

    How to pass array from method to property using PHP

    How to apply a complex style to the selection of a Select2 component?

    CSS/HTML how not to overlap fixed header

    How to make hover use border-radius first-child

    HTML + CSS dropdown menu: how to add a button between each first-level link without breaking the alignment?

    How to add style to the parent when radio button is selected

    How to select Parent Div in CSS [duplicate]

    how to hide submenus in jquery menu

    CSS :hover - How to get lower DIVs to :hover as well?

    Rails 4: how to apply custom CSS to Rails form file field

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How to include display:block in css code that includes pseudo element 'before'