CODEWITHSUNDEEP
htmlcsssass
Ginger Squirrel
Ginger Squirrel

Reputation: 663

Having an issue targeting a HTML element using SCSS/CSS

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

Answers (3)

n1kkou
n1kkou

Reputation: 3142

Don't bother with "beginning with", you can easily use the "contains" [class*="fa-chevron"]

Upvotes: 2

Quentin
Quentin

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

Ginger Squirrel
Ginger Squirrel

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

Related Questions