Have Geek Brain

JQuery basics - selector

I feel stupid. Why isn't my "title" selected? Its background color does not change. I am learning about the + operator, so I am not looking for another selector.

E + F: F element immediately preceded by E

In this case, the div tag is immediately preceded by the div with the 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!

+2


a source to share


3 answers


Do you want to:

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

>

is a child selector. It says to find all elements <div>

that are direct children of the element with the id divA

. When you write $("#divA + div")

, you say, "Find me <div>

who immediately follows <div>

with an id divA

. +

Means" next brother. "

To clarify:



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

So:

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


a source


E + F is an F element immediately preceded by a sibling E-element.



Your div header is a child of your #divA element.

+1


a source


E + F an F element preceded by an E element means that it will choose F if E is the previous sibling .
For instance. your HTML should look like this to make the selector work:

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

Otherwise, you should use a child or descendant relationship:

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


a source






More articles:


All Articles