Question

The code below is not applying the CSS rule clearfix: after I have never used a CSS rule with a colon in the middle so I don’t know why it is not working, any help.

I have the following code in my SCSS file

.clearfix { zoom: 1;}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after { clear: both; }

and the following is my html:

<div id="sidebar1" class="sidebar fourcol first clearfix:after" role="complementary">

  <?php if ( is_active_sidebar( 'sidebar1' ) ) : ?>

    <?php dynamic_sidebar( 'sidebar1' ); ?>

  <?php else : ?>

    <!-- This content shows up if there are no widgets defined in the backend. -->

    <div class="alert help">
      <p><?php _e("Please activate some Widgets.", "bonestheme");  ?></p>
    </div>

  <?php endif; ?>

</div>

Answer 1

Remove :after from the class attribute in your HTML:

<div id="sidebar1" class="sidebar fourcol first clearfix" role="complementary">

---

P.S. Your SCSS is OK, but here’s a more convenient way of accomplishing the same thing:

.clearfix {
    zoom: 1;

    &:before, &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}