Question

I have a form the looks like this:

jsFiddle

<ul id="services">
<li class="service"><label><input type="checkbox">A single option</label>
</li>
<li class="service"><label><input type="checkbox">Another single option</label>
<ul>
    <li>
    <select>
    </select>
     additional options</li>
</ul>
</li>
<li class="service"><label>
<select>
</select>
A multiple option</label>
<ul>
    <li><label><input type="checkbox"> with another option </label>
    <select>
    </select>
    </li>
</ul>
</li>
<li class="service"><label>
<select>
</select>
Another multiple option</label>
<ul>
    <li><label><input type="checkbox"> with another option </label>
    <select>
    </select>
    </li>
    <li>
    <select>
    </select>
     additional options</li>
</ul>
</li>

​
and I’m trying to select only the <label>s in the first level of <li>s with a “service” class by using this:

$(".service label:first-child").css("background", "yellow");​

but is seems to be recursive, and is selecting the first child of the nested <ul>s.

What am I doing wrong here? How do I only select the <label>s in the first level of the <li>s with a “service” class?

Answer 1

$(".service > label").css("background", "yellow");​

Fixed DEMO

---

> is direct child selector.

so a > b selector means, select b only if it’s direct parent is a.

w3 spec:

8.2. Child combinators

A child combinator describes a childhood relationship between two elements. A child combinator is made of the “greater-than sign” (U+003E, >) character and separates two sequences of simple selectors.

---

:first-child selector means, select the element which is the first child of it’s parent.

w3spec:

6.6.5.6. :first-child pseudo-class

Same as :nth-child(1). The :first-child pseudo-class represents an element that is the first child of some other element.