Select all elements with a certain color?

Question

Is there a selector that can select all elements with a certain color? I want to change all text with color: #1a0dab to color:00b0f4.

Answer 1

If the styles are defined inline, you can do this:

[style*="#1a0dab"] {
    color: #00b0f4 !important;
}

Demo:

[style*="#1a0dab"] {
    color: #00b0f4 !important;
}

<p style="color: #1a0dab">paragraph 1</p>

<p>paragraph 2</p>

<p style="color: #1a0dab">paragraph 3</p>

There's no pure CSS way of doing this if the original styles aren't defined inline.

If you have access to JavaScript, you can do something like the following, though performance will probably be poor if your page has a lot of elements or you need to run the function frequently:

[...document.querySelectorAll('*')]
    .filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')

Note that you need to use the RGB representation, not the hex version, to check equality.

Here's a demo of the latter approach:

[...document.querySelectorAll('*')]
    .filter(el => getComputedStyle(el).color === 'rgb(26, 13, 171)')
    .forEach(el => el.style.color = '#00b0f4')

.has-color {
    color: #1a0dab;
}

<p class="has-color">paragraph 1</p>

<p>paragraph 2</p>

<p class="has-color">paragraph 3</p>

Answer 2

There is no such selector available in Javascript/jQuery. Perhaps you can: 1 - Update the CSS files and find/replace all instances instead 2 - Add a class to all the required elements and then use the class to target them.

Answer 3

You should make a list of all the tags you need to change color and then with jquery give a unique color change order