class get color from id-CodePudding

i have few divs that are in same class and have diffrent id's. I need to change color for each div, and i don't know how to do it

I would like to have something like this

HTML code:

<div  id="one"></div>
<div  id="two"></div>
<div  id="three"></div>

CSS code:

#one{
color:green;
}

#two{
color:red;
}

.thing{
background-color: get color from id;
}

CodePudding user response：

color - changing the text color

background-color - change the background of the element

Change all 'color' to 'background-color' and see if this is what you trying to do.

CodePudding user response：

Instead of using color directly, you can use variables.

#one {
  --thing-color: green;
}
#two {
  --thing-color: red;
}
.thing {
  color: var(--thing-color);
  background-color: var(--thing-color);
}

CodePudding user response：

.things{border-size = 10px} //for all element in class .things

#one{border-color = #blue} //for specific element id one

id element inherit by default

CodePudding user response：

Could just set inline style for background colour for each?

<div  id="one" style="background: green;"></div>
<div  id="two" style="background: red;"></div>
<div  id="three" style="background: blue;"></div>

When I tested this it worked using background: red; and background-color: red;

CodePudding user response：

Your mistake is using 'color' in the IDs instead of 'background-color'. This overrides the class' background color, if any.

#one{
    background-color: green;
}

#two{
    background-color: red;
}

#three{
    background-color: blue;
}

should do the trick.

CodePudding user response：

Use CSS pseudo element as first-child, last-child, nth-child(n)

.thing:first-child{
    background-color: green;
}

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

.thing:last-child{
    background-color: blue;
}