Question

I feel dumb.. Why is my “header” div not being selected? Its background color is not being changed. I am learning about the + operator so I am not looking for a different selector.

E + F : an F element immediately preceded by an E element

In this case the div tag is immediately preceded by the div with id divA but it is not selected.

$("#divA + div").css("background-color", "red");

Html

<div id="divA">
        <div>
            Header</div>
        Lorem Ipsum is simply dummy text of the 
        printing and typesetting industry.
</div>

Thanks!

Answer 1

You want:

$("#divA > div").css("background", "red");

> is the child selector. It’s saying find me all <div> elements that are direct children of the element with ID of divA. When you write $("#divA + div") you’re saying “find me the <div> that immediately follows the <div> with ID divA. + means “next sibling”.

To clarify:

<div id="divA">
  <div>child</div>
</div>
<div>next</div>

So:

$("#divA > div") // child
$("#divA + div") // next