Grow your CSS skills. Land your dream job.

Change colour but keeps same styles.

  • # June 26, 2013 at 9:02 am

    I don’t know how to describe this but I can show you in code.

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

    .flat, .red {
    background: #bf3f3f;
    }

    .flat, .blue {
    background: #3f8abf;
    }

    So I want that div to have the flat styles in it but be red so then if I change red to blue it will change the colour to blue because of the styles how would I get this to work is there anyway of doing it? I want to do this instead of repeating my code.

    # June 26, 2013 at 9:39 am

    You need to do this…

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

    .red {
    background: #bf3f3f;
    }

    .blue {
    background: #3f8abf;
    }

    # June 26, 2013 at 9:40 am

    or..for even more control

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

    .flat .red { /* NB comma removed */
    background: #bf3f3f;
    }

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

    # June 26, 2013 at 9:42 am

    Are you like drunk @Paulie_D? :P

    > .flat .red { /* NB comma removed */ }

    This won’t work given his markup. This would work if `.red` was child of `.flat`. He seems to want having both classes on the same element.

    I think you meant :

    .flat.red { … }

    # June 26, 2013 at 9:45 am

    Oops…you are of course correct…

    …and ‘Yes’…currently I am drunk….is that relevant? :)

    # June 26, 2013 at 9:48 am

    You could even try a BEM approach.

    http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

    # June 26, 2013 at 9:48 am

    Awesome it works I did have the second one before I never knew that space made difference.

    I have another question now. If I have .flat.red{} can I do something like this .flat.red {}.blue so I don’t have to repeat .flat again.

    # June 26, 2013 at 9:51 am

    You don’t have to repeat .flat.

    .flat merely defines the width & height.

    .red defines it as having a red background.

    .flat.red means that is has **both** classes.

    # June 26, 2013 at 9:53 am

    But I want to do it so I have .flat and .grad and .grad has a gradient instead of just 1 colour. So if I replace grad in the div it will make it gradient instead.

    # June 26, 2013 at 9:56 am

    Here’s a quick example to show you the difference a space can make.

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

    As you can see `.flat .red` (with space) means it has both classes, `.flat.red` actually works as an entirely **new** class and overrides the first option.

    # June 26, 2013 at 10:02 am

    The following line targets all elements with the `.flat` class.

    .flat { … }

    The following line targets all elements with both the `.flat` class and the `.red` class.

    .flat.red { … }

    The following line targets all elements with the `.red` class that are children (direct or not) of an element with the `.flat` class.

    .flat .red { … }

    CSS selectors have to be read from **right to left** so the last element of the selector is the **key selector** which is basically what are you styles applied to.

    Everytime you encounter a space within a selector line, you change element. To put it simple, the **key selector** is what is on the right of the last space in the selector line.

    When you use `.flat .red`, the key selector is `.red`. When you use `.flat.red`, the key selector is `.flat.red`.

    # June 26, 2013 at 10:15 am

    Ok I get it but is there any way to group them so has the same effect as .flat.red { … } but it can be in a group of more colours

    # June 26, 2013 at 10:17 am

    I don’t understand.

    # June 26, 2013 at 10:21 am

    @braadd You want gradient in your div?

    # June 26, 2013 at 10:21 am

    You mean like…

    .flat.red {
    background:red;
    }

    .flat.red.blue {
    background:blue;
    }

    Well you could but why would you?

    Your element would **have** to look like this

    div class=”flat red blue”>

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

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