[SOLVED] Select all elements with a certain color?

Select all elements with a certain color?

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.

Solution

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>