Reputation: 663
I am currently trying to get an icon to float to the right. This can easily done by adding style="float:right"
or adding an ID, but I am trying to target the icon specifically within the code I have.
My HTML:
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<h4 class="panel-title">
<i class="fa fa-picture-o" aria-hidden="true"></i>
Photography
<i class="fa fa-chevron-up" aria-hidden="true"></i>
</h4>
</a>
</div>
I want the <i class="fa fa-chevron-up" aria-hidden="true"></i>
to float right by targeting classes that begin with fa-chevron
so i can also target fa-chevron-down
.
Here is my SCSS:
.panel-heading {
padding: $panel-heading-padding;
border-bottom: 1px solid transparent;
//@include border-top-radius(($panel-border-radius - 1));
color: #000;
> .dropdown .dropdown-toggle {
color: inherit;
}
.fa {
margin-right: 10px;
color: $mogoturquoise;
}
a {
h4 {
color: #000;
//Doesn't work
i[class^="fa-chevron"] {
float: right;
}
//Works
.fa-chevron-up{
float:right;
}
}
}
}
Why isn't my attribute selector working is this scss?
Upvotes: 0
Views: 170
Reputation: 3142
Don't bother with "beginning with", you can easily use the "contains" [class*="fa-chevron"]
Upvotes: 2
Reputation: 944568
[class^="fa-chevron"]
is an substring matching attribute selector.
It doesn't target classes. It targets attributes.
Your class attribute looks like this class="fa fa-chevron-up"
: It does not begin with fa-chevron
it begins with fa fa-chevron
.
You should add an additional class to solve this:
`class="fa fx-chevron fa-chevron-up"`
You can then target it with a regular class selector:
.fx-chevron {
Alternatively you can use a different substring attribute selector, one that isn't anchored to the start of the string.
[class*="fa-chevron"]
Upvotes: 2
Reputation: 663
I found that:
i[class^="fa fa-chevron"] {
float: right;
}
fixed it.
I'm not too sure why the first version doesn't work...
Upvotes: 1