Grow your CSS skills. Land your dream job.

Change colour but keeps same styles.

  • # June 26, 2013 at 10:24 am

    @Paulie_D I think that’s not working properly.
    because div choose only one value red because red is first class of this div.

    # June 26, 2013 at 10:26 am

    > @Paulie_D I think that’s not working properly. because div choose only one value.

    No. It’s only a matter of specificity / order or rules.

    # June 26, 2013 at 10:27 am

    so if I have it like this

    .flat.red {
    background: #bf3f3f;
    }

    .flat.pink {
    background: #bf3fb4;
    }

    .flat.purple {
    background: #963fbf;
    }

    .flat.blue {
    background: #3f3fbf;
    }

    is there a way so I only have .flat in once and then it applys to the rest so it is not too much repeating

    # June 26, 2013 at 10:28 am

    @HugoGiraudel Yes you are right.

    # June 26, 2013 at 10:41 am

    `.flat` (as you have used it) will define the size of the element.

    `.red` will define the background color

    .`flat.blue` defines nothing in and of itself except it only targets elements with **both** classes.

    http://codepen.io/Paulie-D/pen/yHAaj

    In the example above, try deleting the bg color from `.flat.blue`…only the `.flat` class will apply because no `.blue` class has been defined.

    # June 26, 2013 at 1:36 pm

    > is there a way so I only have .flat in once and then it applys to the rest so it is not too much repeating

    If you’re just looking at saving a way for you to have to write it out, you’ll want to use Sass/Scss:

    .flat {
    height: 60px;
    width: 150px;

    &.red {
    background: #bf3f3f;
    }

    &.pink {
    background: #bf3fb4;
    }

    &.purple {
    background: #963fbf;
    }

    &.blue {
    background: #3f3fbf;
    }
    }

Viewing 6 posts - 16 through 21 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".