0

I have only one ID (main).

I'm trying to set .css() to "main[0]->sub[0]->left[0]" as you can see below:

<div id="main">

    <div class="sub">
        <div class="left">
            <div class="subsub">
                main[0]->sub[0]->left[0]
            </div>
            <div class="subsub">
                main[0]->sub[0]->left[1]
            </div>
        </div>
        <div class="right">
            main[0]->sub[1]
        </div>
    </div>

    <div class="sub">
        <div class="left">
            <div class="subsub">
                main[1]->sub[0]->left[0]
            </div>
            <div class="subsub">
                main[1]->sub[0]->left[1]
            </div>
        </div>
        <div class="right">
            main[1]->sub[1]
        </div>
    </div>

</div>

I can access the first MAIN child this way:

$($('#main').children()[0]).css('MY CSS...');

And the second MAIN child this way:

$($('#main').children()[1]).css('MY CSS...');

But how can I access "sub" class children?

Russel Riehle
  • 267
  • 1
  • 11

3 Answers3

1

Every jQuery element has the $.children() method. So you can do $($($('#main').children()[0]).children[0]).css()

However, if it's the same set of CSS rules being applied to the elements you can do $("#main .left .subsub").css()

willwolfram18
  • 1,747
  • 13
  • 25
1

Use a combination of .find and :first selectors.

$('#main').find(".subsub:first")
Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
1

Here's a sizzle selector that could find the first child of both:

$('#main .sub .left :first-child').css('color', 'red');

That's not the most efficient (or only selector), as $('.subsub:first-child').css() would work as well. Depending on how many times you're doing this, it could be more efficient to cache the parent and use .children() per this answer.

Community
  • 1
  • 1
Nic
  • 13,287
  • 7
  • 40
  • 42