CSS Multiple Classes

[SSigns]

So I'm building a website for a client, never had to do this before but I thought that it would make sense to just do this to make the color easier to select;

I want to be able to do this in html: <div class="colourblock red/yellow/lightblue/orange etc">

  <div class="colourblock-orange">
            <div class="site-container">
            LOL
            </div>

.colourblock {
    background: #F67D42;
    width:100%;
}

.colourblock-red { }
.colourblock-yellow {}
.colourblock-lightblue {}
.colourblock-orange {}
.colourblock-green {}
.colourblock-darkblue {}

 

[Weasel]

You can use spaces to give it multiple classes. <div class="colourblock red"> or <div class="colourblock yellow">

EDIT:

<div class="colourblock orange">
      LOL
</div>

<div class="colourblock red">
      LOL
</div>

.colourblock { width: 100%; }
.colourblock .red { background-color: #ff0000; } (or just .red without the .colourblock before it, if you want to use the .red class even if there is no parent named colourblock)

 

[SSigns]

You can use spaces to give it multiple classes. <div class="colourblock red"> or <div class="colourblock yellow">

EDIT:

<div class="colourblock orange">
      LOL
</div>

<div class="colourblock red">
      LOL
</div>

.colourblock { width: 100%; }
.colourblock .red { background-color: #ff0000; } (or just .red without the .colourblock before it, if you want to use the .red class even if there is no parent named colourblock)

Didn't work?

 

[Weasel]

Didn't work?

Please post the code you are using.

 

[Sysode]

Use what @Weasel gave you but remove the space between the classes.

 

[Weasel]

Use what @Weasel gave you but remove the space between the classes.

It should work, even with the spaces.

 

[Sysode]

It should work, even with the spaces.

It wouldn't because the CSS isn't grouped, if you leave a space it isn't doing anything to the first CSS class. You either group them (no space), apply styles to multiple classes (by using a comma) or make it a child element by using (>)

 

[brsy]

Didn't work?

.colourblock { width: 100%; }
.colourblock.red { background-color: #ff0000; } (or just .red without the .colourblock before it, if you want to use the .red class even if there is no parent named colourblock)

The above should work now. Read @Sysode's explanation for why the space needs to be removed.

It wouldn't because the CSS isn't grouped, if you leave a space it isn't doing anything to the first CSS class. You either group them (no space), apply styles to multiple classes (by using a comma) or make it a child element by using (>)