Change colour but keeps same styles.

[braadd]

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.

[Paulie_D]

You need to do this…

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

.red {
background: #bf3f3f;
}

.blue {
background: #3f8abf;
}

[Paulie_D]

or..for even more control

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

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

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

[Kitty Giraudel]

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 { … }

[Paulie_D]

Oops…you are of course correct…

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

[Kitty Giraudel]

You could even try a BEM approach.

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

[braadd]

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.

[Paulie_D]

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.

[braadd]

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.

[Paulie_D]

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.

[Kitty Giraudel]

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

[braadd]

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

[Kitty Giraudel]

I don’t understand.

[Sarfaraj]

@braadd You want gradient in your div?

[Paulie_D]

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

[Author]

Posts