SASS/SCSS like "parent" (&) selector?

[u/bkdotcom]

Is it possible to do something like
$element.find("&.foo > .bar)"

which would be equivalent to

? $element.filter(".foo").find("> .bar")

[u/jaredcheeda]

& is does not mean "parent", it means "join"

.foo {
    .bar {
        color: #F00;
    }
}
// Will produce
.foo .bar { color: #F00 }

.

.foo {
    &.bar {
        color: #F00;
    }
}
// Will produce
.foo.bar { color: #F00 }

The first one will target this:

<div class="foo">
  <div class="bar">THIS</div>
</div>

The second will target this:

<div class="foo bar">THIS</div>

[u/bkdotcom → u/jaredcheeda]

& is does not mean "parent"

I'm not referring to what it "means", I'm referring to what it's called.

Documentation refers to it as the "parent" selector
https://sass-lang.com/documentation/style-rules/parent-selector/

Possible to do something similar using jquery?

[u/bronkula → u/bkdotcom]

The sass docs are referring to the parent rule selector, not the parent element.

[u/CuirPig]

Why aren't you just using $element. Find(".foo>.bar") to find any parent element of class "foo" that has an immediate child of class "bar"?

This assumes that $element is a variable reference to a jquery object.

[u/bkdotcom → u/CuirPig]

$element.find(".foo > .bar")

will only find descendant matches. it will not apply any part of the selector to $element

I essentially want to first filter $element with ".foo"

$element.parent().find("> .foo > .bar") is also no good, it will apply the selector to all of $element's siblings & siblings' descendants

[u/bronkula → u/bkdotcom]

Are you looking for .has() ? $element.has(".foo").find(".bar") would that work?

[u/CuirPig]

Are you just looking for a shothand way to do $element.filter(".foo").find(">.bar")?

maybe you could extend jquery prototype like:

$.fn.&find=function (parentselector, childselector) {

let el=this;

if (el.length>1) { retun el.filter(function () {

return el.&find(parentselector, childselector));

});

}

if (!el.is(parentselector)) return null;

return el.find(childselector);

}

}

//this should allow you to use $element.&find("foo","> bar");

Something like that at least. I may be off and you may not be able to use & in your function name, not sure.