have any mistake with my last-child selector?

Question

$(function(){
   $("#mainContainer #container:last-child").css("background-image","url('/images/content-title.png') no-repeat")
})

code above didn't work , nothing happend

$(function(){
   $("#mainContainer #container:last-child").css("background-image","url('/images/content-title.png')")
})

code above work , but it change all the #container background and repeat-y.

not only the last-child

what i want is change the last-child of #container background image and no-repeat

my html

<div id="mainContainer">//width 930px margin 0 auto
  <div id="container">//height 500px test background repeat-y
    dynamic content here
  </div>
</div> 

Answer 1

You want this:

$("#mainContainer #container > *:last-child")
    .css("background","url('/images/content-title.png') no-repeat");

1. #container:last-child means you're looking for #container which is the last child of whatever that element sits inside, not the last child of #container.

   #container > *:last-child, on the other hand, refers to any element which is the last child of the #container element.

2. In order to set both a background image and a repeat value in the same line, you need to use the shorthand background CSS property. Conversely, if you don't want to use a shorthand you can do this instead:

   $("#mainContainer #container > *:last-child")
       .css({
            "background-image": "url('/images/content-title.png')", 
            "background-repeat": "no-repeat"
       });
   

Answer 2

not work , and i try below

    <script type="text/javascript">
    //$("#mainContainer #container > *:last-child").css("background","url('/images/container-bottom.png') no-repeat");
    $("#mainContainer #container > *:last-child").addClass("container-last");

    </script>

but nothing happend too