Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Change colour but keeps same styles.

  • This topic is empty.
Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
    Posts
  • #140526
    Sarfaraj
    Participant

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

    #140528
    Kitty Giraudel
    Participant

    > @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.

    #140529
    braadd
    Participant

    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

    #140530
    Sarfaraj
    Participant

    @HugoGiraudel Yes you are right.

    #140534
    Paulie_D
    Member

    `.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.

    #140588
    TheDoc
    Member

    > 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.