JQuery Applying CSS to Inner DIV

Question

I am trying to apply a style to the inner div which is contained in the parent div. The parent div also contains tons of other div but I just want to apply the color to the [0] div.

$("#parentDiv div")[0].css('background-color', 'red');

For some reason it says "css function is not defined!"

Answer 1

This should work

$("#parentDiv div:first").css(background-color, 'red');

Answer 2

Can't you use the "first-child" selector?

Example: $("#parentDiv div:first-child").css('background-color', 'red');

Answer 3

$("#parentDiv div")[0] // returns a regular DOM object, NOT jquery extended

You might try:

$("#parentDiv div").eq(0).css('background-color', 'red');

Although, the :first selector should work.

If it still doesn't work, be sure to look at your HTML after the method has been run, to determine if the first element is really what you think it is.

Answer 4

The jQuery way to do this is:

$('#parentDiv div').eq(0).css({backgroundColor: 'red'});

.eq(0) like [0] but gives you the jQuery object. JQuery's eq() docs explain most of it (except why it's "eq" and not something more sensible like "at").

Answer 5

Sometimes I have better luck using the other CSS syntax. You can try this (it's also better if you are going to add multiple styles):

$('#parentDiv div:first').css({backgroundColor:'red'});

You can also try nthChild or eq selectors if you need to attach style(s) to some div other than the first (just remember nthChild is ONE-based, not ZERO-based...):

$('#parentDiv div:nthChild(1)').css({backgroundColor:'red'});
// or
$('#parentDiv div:eq(0)').css({backgroundColor:'red'});

Answer 6

I've run into a similar error like this and wasn't able to really figure out what was going wrong. It has to do with the function returning a DOM object vs. a jQuery object though.

In the end I did something like this, which worked, but I'm not sure it's the best way to do it:

var divID = $("#parentDiv").children("div").attr("id");
$("#"+divID).css('background-color', 'red');