Is there a way to select an element based on background color?-CodePudding

I want to change the background-color of a child of a div with a certain background color and was wondering if this could be done with CSS. I'll explain the case below.

something like:

.container[background-color=some color] .content {
    background-color: some other color
}

My guess is that it can't be done because you would then be able to do something along the lines of:

.div {
    background-color: some color
}

.div[background-color=some color] {
    background-color: some other color
}

Which would create some kind of circularity where the div would be selected, set to the other color, then not be selected anymore and fall back on the original definition, but then be selected again because it has that original color.

I don't think the :has, :is and :where selectors work this way either but I was hoping there was some way this could be done while avoiding doing it in Javascript.

The Case
Divs are created dynamically based on errors in user input. These divs may or may not contain a certain type of error for which another div is needed

// simple errors
<div >
    <p>Error 1</p>
    <p>Error 2</p>
    <p>Error 3</p>
    <p>Error 4</p>
</div>

// more complex errors
<div >
    <p>Error 1</p>
    <div >
        <p>Complex Error 1</p>
    </div>
</div>

I give the errors div a background color with odd/even

.errors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    border-radius: 4px;
    margin: 8px 0px;
}

.errors:nth-child(odd) {
    background-color: #dee2e6;
}

.errors:nth-child(even) {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
}

I was wondering whether or not the elements with class errors could be selected based on background color to then select it's child.

I'll post my own solution as the answer.

CodePudding user response：

The best way to do it without using JavaScript would be with classes. You can add the first background-color with a class that you add to the children that need to have that background color. Then, you change the background-color of only the children that have that class. And if you need to you can add and remove the class dynamically with JavaScript (as you are not providing an example of the whole app I don't fully understand the behaviour you are looking for).

div.black {
    background-color: black;
}

div.white {
    background-color: white;
}

div.black {
    background-color: #5A5A5A;
}

CodePudding user response：

This is the way you could do it. Separate the class out to style the background color then use the class selector .class1.class2 to apply the rule to only the parent. Use the descendent class combinator to apply the background colour to the child.

Here's an example

.parent {
  border: 1px solid black;
  padding: 1rem;
  font-size: 1.5rem;
  margin-top: 1rem;
}

.yellow-backgroud {
  background-color: yellow;
}

.red-background {
  background-color: red;
}


/* this selects all child divs where the parent has the parent class AND the yellow-background class */
.parent.yellow-background div {
  background-color: green;
}


/* this selects all child divs where the parent has the parent class AND the red-background class */
.parent.red-background div {
  background-color: orange;
}

<div class='parent yellow-background'>
  Parent
  <div>
    This is a the child of the yellow background parent
  </div>
</div>

<div class='parent red-background'>
  Parent
  <div>
    This is a the child of the red background parent
  </div>
</div>

<div class='parent'>
  Parent
  <div>
    This is a the child with no parent background color set.
  </div>
</div>

CodePudding user response：

The odd/even selector can already be used to select those elements.

.errors:nth-child(odd) {
    background-color: #dee2e6;
}

.errors:nth-child(odd) .complex-error {
    background-color: #f8f9fa;

}

.errors:nth-child(even) {
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
}

.errors:nth-child(even) .complex-error {
    background-color: #dee2e6;
}

There was no reason to select them after the fact when you can just select them at the place where they are defined.