0

This is very difficult to explain, but I’m trying to minimise the amount of CSS coding to create the same output.

In the example I have 3 divs, all that are identical except the colour. How can I make the 3rd section use the same css rule as one of the other sections but have a red background? I know how to do it using text (e.g. p class = rule1, or p class = rule 2) but not with divs.

I hope I’ve explained the problem clearly. Thank you.

.central-section{
	background:#9C3;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
.central-section-2{
	background:#ff0;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>

<div class="central-section-2">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>

<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

6 Answers 6

4

If I understood clearly what you ask, here is how I would do it. One class for the divs structures (because it is shared by all the central sections) and several for the background colors.

.central-section {
  width: 960px;
  height: auto;
  margin: 0 auto;
  margin: 10px 0 10px 0;
}

.green-background {
  background: #9C3;
}

.yellow-background {
  background: #ff0;
}

.red-background {
  background: #f00;
}
<div class="central-section green-background">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but green background</p>
</div>

<div class="central-section yellow-background">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but yellow background</p>
</div>

<div class="central-section red-background">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

1

I would suggest creating one class called "central-section" with all your base rules, and create separate classes for your different background colors. Then in your code you could add your base "central-section" class to each div that needs to be formatted with your desired style, then add on the extra class to add color. For instance, if your colors denoted levels of severity, they'd be named like below:

.central-section{
    width: 960px;
    height: auto;
    margin: 0 auto;
    margin: 10px 0 10px 0;
}

.success{
    background: green;
}

.warning{
    background: yellow;
}

.error{
    background: red;
}

And your html would look like this:

<div class="central-section success">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <p>Exact same section but green background</p>
</div>

<div class="central-section warning">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <p>Exact same section but yellow background</p>
</div>

<div class="central-section error">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <p>Exact same section but I want a red background without having to create another huge css section</p>
</div>
1

I would just create a class per color that you're looking to use.

.central-section{
	background:#9C3;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}

.yellow-bg{background:#ff0;}
.red-bg{background:#f00;}
<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>

<div class="central-section yellow-bg">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>

<div class="central-section red-bg">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

1

As explained, you have a set of elements (family) with same properties. But, one of them need a different attribute.

The best approach would be to give the family a common class and then override the member which needs that special attribute via cascading:

.central-section {
  background: #9C3;
  width: 960px;
  height: auto;
  margin: 0 auto;
  margin: 10px 0 10px 0;
}
.central-section-2 {
  background: #ffff00;
}
.central-section-3 {
  background: red;
}
<div class="central-section central-section-1">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but green background</p>
</div>

<div class="central-section central-section-2">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but yellow background</p>
</div>

<div class="central-section central-section-3">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

0

You can use brackets [ ]:

[class^="central-section"] {
    background:#9C3;
    width:960px;
    height:auto;
    margin:0 auto;
    margin: 10px 0 10px 0;
}
.central-section-2{
    background:#ff0;
}

Statement [class^="central-section"] covers all elements with class name which begins with central-section. Thus for 3rd section you can define only property that will differ:

.central-section-3{
    background:#f0f;
}
0

you can just add another class.

like below

.central-section{
	background:#9C3;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
.central-section-2{
	background:#ff0;
	width:960px;
	height:auto;
	margin:0 auto;
	margin: 10px 0 10px 0;
}
.central-section.red p{
  background:red;
  }
<div class="central-section">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but green background</p>
</div>

<div class="central-section-2">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but yellow background</p>
</div>

<div class="central-section red">
<h1>Header 1</h1>
<h2>Header 2</h2>
<p>Exact same section but I want a red background without having to create another huge css section</p>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.