How to change css properties

Question

I'm trying to create 12 columns using html. I have a css class called .columnContent with few properties one of them being background-color: (set to red)

I need to changed the background-color as I want every column to have different colors. How do I change the property of the column class when declaring it in html? Or can I do using div? otherwise I will have to create 12 css classes, there must be a better way of doing it.

I tried <div style="color" but that only changes the text color not the background color for the columns.

.columnWrapper {
  display: flex;
  flex-direction: row;
}

.columnContent {
  position: relative;
  width: 200px;
  height: 1000px;
  text-align: left;
  margin: 3px;
  background-color: red; /* <- */
}

<div id="centerContainer">
  <div class="columnWrapper">
    <div sclass="columnContent">
    </div>
    <div class="columnContent">
      test
    </div>
  </div>
</div>

Assign correct classes. Classes should describe the content, for instance "population" or "scores". Then it's easy to assign different styles to each. On the other hand, if you just want alternating colors unrelated to content, you can use :nth-of-type or :nth-child. Also, remember you can assign several classes to a single element. — spectras
– spectras, Commented Jun 19, 2017 at 9:07
Careful, little typo on your first div class "collumnContent" : class instead of sclass — Aigloun
– Aigloun, Commented Jun 19, 2017 at 9:08
@BoltClock understood. But at least "css-selectors" should be tagged, since the question is about selecting elements with the same class... — andreas
– andreas, Commented Jun 19, 2017 at 10:28

Graham · Accepted Answer · 2017-09-29 00:18:45Z

4

You can use the :nth-child() pseudo class to apply the different colors to your .columnContent elements, i.e.:

.columnContent:nth-child(1) { background-color: green; }
.columnContent:nth-child(2) { background-color: red; }
.columnContent:nth-child(3) { background-color: blue; }
/* and so on */

Here is a working example:

.columnWrapper {
  display: flex;
  flex-direction: row;
}

.columnContent {
  position: relative;
  width: 200px;
  height: 1000px;
  text-align: left;
  margin: 3px;
}

.columnContent:nth-child(1) {
  background-color: green;
}

.columnContent:nth-child(2) {
  background-color: red;
}

.columnContent:nth-child(3) {
  background-color: blue;
}

.columnContent:nth-child(4) {
  background-color: orange;
}

<div id="centerContainer">
  <div class="columnWrapper">
    <div class="columnContent"></div>
    <div class="columnContent"></div>
    <div class="columnContent"></div>
    <div class="columnContent"></div>
  </div>
</div>

edited Sep 29, 2017 at 0:18

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Jun 19, 2017 at 9:05

andreas

17k13 gold badges81 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4014639 Over a year ago

A quick question, can I declare a specific child number such as nth-child(1,3,7)? I tried it but it didnt work

marc_s · Accepted Answer · 2020-08-01 08:50:05Z

You can use nth-child like this for trigger a specific column:

.columnWrapper {
    display: flex;
    flex-direction: row;
}
.columnContent {
    position: relative;
    width: 200px;
    height: 1000px;
    text-align: left;
    margin: 3px;
    **background-color: red;**
}

.columnContent:nth-child(1){
  background-color: rgba(0, 0, 0, 1);
}

.columnContent:nth-child(2){
  background-color: rgba(0, 0, 0, 0.95);
}

.columnContent:nth-child(3){
  background-color: rgba(0, 0, 0, 0.90);
}

.columnContent:nth-child(4){
  background-color: rgba(0, 0, 0, 0.85);
}

.columnContent:nth-child(5){
  background-color: rgba(0, 0, 0, 0.80);
}

.columnContent:nth-child(6){
  background-color: rgba(0, 0, 0, 0.75);
}

.columnContent:nth-child(7){
  background-color: rgba(0, 0, 0, 0.70);
}

.columnContent:nth-child(8){
  background-color: rgba(0, 0, 0, 0.65);
}

.columnContent:nth-child(9){
  background-color: rgba(0, 0, 0, 0.60);
}

.columnContent:nth-child(10){
  background-color: rgba(0, 0, 0, 0.55);
}

.columnContent:nth-child(11){
  background-color: rgba(0, 0, 0, 0.50);
}

.columnContent:nth-child(12){
  background-color: rgba(0, 0, 0, 0.45);
}

<div class="columnWrapper">
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
</div>

Or you can trigger the first or the last column using first-child and last-child like this :

.columnWrapper {
    display: flex;
    flex-direction: row;
}
.columnContent{
    position: relative;
    width: 200px;
    height: 1000px;
    text-align: left;
    margin: 3px;
    background-color: red;
}

.columnContent:first-child{
  background-color: blue;
}

.columnContent:last-child{
  background-color: green;
}

<div class="columnWrapper">
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
  <div class="columnContent"></div>
</div>

marc_s · Accepted Answer · 2020-08-01 08:48:31Z

-1

You can loop using JavaScript like:

<div id="centerContainer">
<div class="columnWrapper">
<script>
for (i = 1; i < 5; i++) {
    document.getElementById('columnWrapper').innerHTML='<div class="columnContent' + i + ' "> test </div>';
}
</script>

</div>
</div>

Then you style them with CSS differently.

PS: This isn't the best approach for dynamic pages. If you're using a server-side scripting language like PHP, you can loop the results in DIV before displaying them.

edited Aug 1, 2020 at 8:48

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 19, 2017 at 9:15

Martins

5184 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to change css properties

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related