overide zurb foundation float right property for last element

Question

I am using Zurb foundation and I am trying to create a css property that will be called and override the property float:right that they give the the last column. I know that they provide the end class to make you able to float a div on the left, but I have a case where I really have to make sure that my css property is the one to be called at the end.

code:

<div class="row">
  <div class="my-class small-6 columns">floated on the right by foundation</div>
</div>

.my-class{
  float:left;
}

the above code does not work, but it works when I add the important property which is something I want to avoid as well.

Answer 1

In HTML/CSS, you need to make sure that your custom class is more specific than the class you're overriding and that your CSS is loaded after Zurb's CSS.

Zurb has the following class;

[class*="column"] + [class*="column"]:last-child {
  float: right; }

Which means attribute class contains "column" and is last in parent. To be able to override this, try adding this to the end of your CSS file that is loaded after Zurb's and change the div to <div class="small-6 columns my-class">

[class*="my-class"]:last-child {
    float: left;
}