override :first-child pseudo class styling using jquery

Question

Hi,

I need to override the defined :last-child style defined in my stylesheet using jQuery. I'm aiming for minimal markup using a combination of css and jQuery where the structure around "container-content" is appended to the div on document-ready.

<div id="title-some-impact"><!--Vertical container title--></div>
   <div class="container-content-wrapper">
         <div></div>
         <div class="container-content"><!--Actual container content-->
            <div class="sub-container-content"></div>
         </div>
         <div style=""></div>
   </div>
   <div style="clear: both;"></div>
</div>

I'm using the first and last div in container-content-wrapper to add rounded corners using css, like so:

.container-content-wrapper>div:first-child {  /* rounded corners top */
    width: 930px;
    height: 16px;
    background: url(../Images/top-rounded-corners.png) top no-repeat;
}

.container-content-wrapper>div:last-child { /* rounded corners bottom */
    width: 930px;
    height: 33px;
    background: url(../Images/bottom-rounded-corners.png) top no-repeat;
}

In some cases I need to change the bottom background image using jQuery / JavaScript have failed miserably so far.

I've tried using: $('.container-content-wrapper>div:first-child').css('background', 'some other link'); Also, adding another class that points to another image does not work.

How can I override the defined :last-child style defined in the stylesheet using jQuery?

Answer 1

$('.container-content-wrapper>div:first-child').css('background', 'some other link');

That selector is fine with your markup. It will select that first div which is a direct ascendant from .container-content-wrapper. So that is not your problem.

CSS selectors have no reference to jQuery selectors, so you cannot "overwrite" them. It looks like your some other link is wrong here.

Answer 2

Actually I initially made a mistake in targeting the div whose style needs to be replaced. It was just a matter of making the correct selection.

For reference, I have solved it by using:

$('.container-content-wrapper:has(.sub-container-content)')
.addClass('container-content-wrapper-for-sub');

where container-content-wrapper-for-sub has this style and is defined below .container-content-wrapper>div:last-child

.container-content-wrapper-for-sub>div:last-child {
/* rounded corners bottom for subsection */
    background: url(../Images/bottom-rounded-corners-extra-gray.png);
}