Renaming css code in grid

Question

I am having problems renaming some classes from a grid I'm working on.

The current code is this:

.col,
   .cols {
    margin-left: 4%; 
  }

  .col:first-child,
  .cols:first-child {
    margin-left: 0; 
  }


  .one.col,
  .one.cols, { 
    width: 4.66666666667%; 
  }

And then the html code is:

<div class="one col">One</div>
  <div class="eleven cols">Eleven</div>

The above code works but I need to change the class names to work so the html code goes like this:

 <div class="one-col">One</div>
  <div class="eleven-cols">Eleven</div>

My question is... How do I change the code below so that the above html works?

.col,
   .cols {
    margin-left: 4%; 
  }

  .col:first-child,
  .cols:first-child {
    margin-left: 0; 
  }


  .one.col,
  .one.cols, { 
    width: 4.66666666667%; 
  }

Answer 1

Just tweak the CSS:

.one-col,.eleven-cols{
    margin-left: 4%; 
}

.one-col:first-child,.eleven-cols:first-child {
    margin-left: 0; 
}


.one-col { 
    width: 4.66666666667%; 
}

.eleven-cols {
    width: 51.3333333334%;
}

Answer 2

I am not clear on why you need only one class because we can declare multiple classes in class attribute.

But anyways. hope below code will help you,

.one-col{
    margin-left: 4%; 
    width: 4.66666666667%; 
}
.eleven-cols{
    margin-left: 4%; 
    width: 51.3333333334%;
}
.one-col:first-child,.eleven-cols:first-child{
    margin-left: 0; 
}