Basic javascript jquery

Let me explain this

$("div p").css("background-color" , "red");

The above code will set the background-color red for all the p tags inside the div tag.

Now,

$("p").css("background-color" , "yellow");

The above code will set the background-color yellow for all the p tags, inside and outside the div tag too.

Now, when you do the reverse process, doing

$("p").css("background-color" , "yellow");

sets the background-color yellow for all the p tags, inside and outside the div tag first.

Next, doing this

$("div p").css("background-color" , "red");

sets the background-color red for all the p tags inside the div tag, but not the p tags outside the div. Hence this one works but not the first way.

The reason is: Each JavaScript statement is executed in the sequence/order they are written.

So, in your case, the first statement will change the background color of all p tags within a div to red first. But the second statement will change the background color of all p tags to yellow. So, the second statement overwrites the previous changes, made by the first statement.

And that also explains, why, when you change those lines, it works as expected. Because in that case, the first statement will change the background color for all p tags to yellow. And, afterwards, the second statement will change the background color only for those p tags within a div tag to red.

Update: You can, alternatively, use something like this:

$('p').each(function(){
    var clr = ('DIV' === $(this).parent()[0].nodeName) ? 'red' : 'yellow';
    $(this).css('background-color', clr);
});

This code loops over all p tags, and set the background color based on the tag name of its parent element. If it's a div, it will use red, otherwise yellow. Here's a demo: jsfiddle.net/3dL7r

You're thinking about this problem the wrong way. If those style directions were all in a CSS file, the div p direction would trump the p direction, so the inner <p> would be red and the outer <p> would be yellow.

However, that's not what we're doing here. jQuery runs after the CSS has loaded initially, and doesn't care (or need to care) about page-wide CSS style rules; ALL styling changes that we make with jQuery will override the pre-set styles.

Let's look at what you wrote. Your first command,

$("div p").css("background-color" , "#FF0000");

translates into English as "Take all <p> tags that exist inside <div> tags and set their background color to red". Your second command,

$("p").css("background-color" , "yellow");

takes all <p> tags (including the ones we just turned red) and turns them yellow.

4 ("div p") is more generic than 3 ("div p"), so if you put 4 after 3 you will first color every p nested in a div in red, but immediatly after you'll color it in yellow, since that is what you're saying in 4

jQuerys css() functions sets the style attribute. Thus order mattes as both calls will set that attribute on some element and override each other.

$("div p").css("background-color" , "red");

The above line of code changes p (found) nested under div. Its the syntax of css.

$("p").css("background-color" , "yellow");

The above line of code changes all p tags found in DOM of HTML

The $("div p") on line 3 targets all p tags inside a div (that's the cascading selector - the second tag must be inside the first) while the $("p") on line 4 targets all paragraph tags. The best way to have the different colours is indeed to move 4 above 3 - 3 is more specific.

This is more about css specificity. In line 3, your selector div p is setting all p that are within a div to red. In line 4 you are overriding this by setting all p to yellow (whether or not they are in a div).

You need to first define outside p tags element with background , if you define it after p tags inside div it will replace that div with yellow color.

$("#testbutton").click(function() {
     $("p").css("background-color" , "yellow");
     $("div p").css("background-color" , "#FF0000");
});

In English,

First your colouring the <p> tags inside the <div> tags red. Secondly your colouring all the <p> tags yellow. so of course there all going to be yellow. You have to remember that styles in JavaScript don't act like CSS in relevance to priority. JavaScript adds the CSS style to inline style="" attribute so the only thing that will over-ride the style's is an !important witch you should not use.

so the reason it works when you put 4 above 3 is because the you are colouring all the <p> tags yellow, then specifically colouring the ones in the <div> tag red.

so basically any styles that are added to the element last in JavaScript will override the previous unless !important is used