Im trying to change an elements pseudo content based on whether or not its child has a certain attribute.
For example, I want to display different font awesome icons based on whether or not a bootstrap collapsable div has the attribute aria-expanded="true".
HTML
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" href="#month1">01/01/2001 - 01/02/2001</a>
</h5>
</div>
<div id="month1" class="panel-collapse collapse">
<div class="panel-body">
test
</div>
</div>
</div>
</div>
How would I change the h5 pseudo content based on if the child a tag has a certain attribute?
I would have thought something like this would work
.panel-heading {
h5:has(> a[aria-expanded="true"]){
&::after {
content: "\f055";
font-family: FontAwesome;
float:right;
}
}
}
But it doesn't seem to do anything. Using anything with the :has selector in my SASS code doesn't seem to work.
For example, something simple like
h5:has(a){
&::after {
content: "\f055";
font-family: FontAwesome;
float:right;
}
}
}
doesn't even work.
What is the correct way to use :has in sass?
