Menu
I am trying to read some JavaScript that is selecting element(s) using this expression
$("body > div:not(.layout-ignore):not(.ui-loader)")
I get that its starting at the body but is that the Greater Than (>) symbol saying select all div elements within the body element that do not have .layout-ignore and also not .ui-loader class attributes?
Can anyone explain to me this syntax? Also point me to some online documentation that helps me further understand this selector expression.
Cheers
690
jQuery uses CSS selectors as its basis. The MDN has an extremely thorough guide as to what these are and how they work.
Please see here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
and here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started
In your example it means any div (that is not of class .layout-ignore or .ui-loader) that is a child of body. Meaning nested divs would not be selected.
Hope this helps.
73
...is that the Greater Than (>) symbol saying select all div elements within the body element that do not have .layout-ignore and also not .ui-loader class attributes?
The > is saying that the div that matches must be an immediate child of body. It's called a "child combinator". So the only div elements that can possibly match are immediate children of body, they can't be inside another intermediate element. So:
<body>
<div><!-- This div matches the selector -->
<div><!-- But this div does not --></div>
</div>
</body>
The two :not qualifiers (which are the "negation pseudoclass") are saying that the div cannot have the class layout-ignore and cannot have the class ui-loader.
So in total:
<body>
<div><!-- This div matches the selector --></div>
<div><!-- But this div does not, it's not a direct child of body --></div>
</div>
<div class="layout-ignore"><!-- This does not because it has layout-ignore --></div>
<div class="ui-loader"><!-- And neither does this, because it has ui-loader --></div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
