I'm coloring specific td elements by declaring:

td[style*="background-color: #ffc"], td[style*="background-color: #fb9"], 
td[style*="background-color: #bfc"], td[style*="background-color: #fcc"] {
background-color: #0d1117 !important;
}

How can I refactor this? The thing is I cannot color all td elements, only specific ones with certain background colors.

CodePudding user response：

there is a pseudo-class in CSS called :is that makes you delete the code repetition

td:is([style*="background-color: #ffc"], [style*="background-color: #fb9"], [style*="background-color: #bfc"], [style*="background-color: #fcc"]) {
    background-color: #0d1117 !important;
}

documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:is

or you can use javascript by using forEach!

how it works: you have two variables,
the first needs an array of hex color codes.
the second variable needs the final color you want the element to be colored.

how to make it work on my project:

1. create a <script> tag or a javascript file.
2. insert this code inside it:

let colorsArray = ["ffc", "fb9", "bfc", "fcc"]; // change this line
let finalColor = "0d1117";

colorsArray.forEach((color) => {
    let tdWithColor = document.querySelectorAll(`td[style*="background-color: #${color}"]`);

    tdWithColor.forEach((element) => {
        element.style = `background-color: #${finalColor}`;
    })
});

// watch the code snippet below if you want comments

3. change the variables to what you need.

code snippet with demo example:

let colorsArray = ["ffc", "fb9", "bfc", "fcc"]; // change this line... don't put "#" in the beginning (js automatically adding it)
let finalColor = "0d1117"; // your final color, don't put "#" in the beginning (js automatically adding it)

/* Don't change the lines below */

/* for every color we are adding this logic below */
colorsArray.forEach((color) => {
  /* getting all the html elements with the same color */
  let tdWithColor = document.querySelectorAll(`td[style*="background-color: #${color}"]`);

  /* if there is more than one td of the same color we are coloring it too */
  tdWithColor.forEach((element) => {
    element.style = `background-color: #${finalColor}`;
  })
});

    <!-- this is only a example -->
    <table>
        <tr>
            <!-- I am creating multiple elements with the same bg color to test javascript  -->
            <td style="background-color: #ffc">FFC</td>
            <td style="background-color: #ffc">FFC</td>
            <td style="background-color: #ffc">FFC</td>

            <td style="background-color: #fb9">FB9</td>
            <td style="background-color: #fb9">FB9</td>
            <td style="background-color: #fb9">FB9</td>

            <td style="background-color: #bfc">BFC</td>
            <td style="background-color: #bfc">BFC</td>
            <td style="background-color: #bfc">BFC</td>

            <td style="background-color: #fcc">FCC</td>
            <td style="background-color: #fcc">FCC</td>
            <td style="background-color: #fcc">FCC</td>
        </tr>
    </table>