Select element based in css property

Question

I want to select a child element that has a specific background color.

For example, I have my parent #xxx (id) and it has lots of direct children. I want to select all the children from this parent #xxx that have bakground:#000

I searched a lot and couldnt find an answer. Could you help me? Something like this (of course it does not work):

#xxx > div(background:#000) {

}

I don't think that's actually possible. Chechk [this answer](https://stackoverflow.com/a/1220873/4824627) as it's related to your issue. You could try something hacky such as `[style*="background:#000"]` but that would only work on elements that have the `style` property set to `background:#000`, i.e. it would not include stylesheet modifications — Matheus Avellar, Aug 18 '17 at 22:33
It's possible by changing the HTML or using JS. For some reason I thought you wanted a CSS-only solution. My bad! — Matheus Avellar, Aug 18 '17 at 23:11

score 1 · Answer 1 · answered Aug 18 '17 at 22:34

1

You can't do this with css, but you can use jquery for that:

$('#xxx div').filter((index, el) => {
  return $(el).css('backgroundColor') == 'rgb(0, 0, 0)'
}).css('color', 'white');

.a {
  background: red;
}
.b {
  background: green;
}
.c {
  background: blue;
}
.d {
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xxx">
  <div class="a">a1</div>
  <div class="b">a2</div>
  <div class="c">a3</div>
  <div class="d">a4</div>
</div>

answered Aug 18 '17 at 22:34

Dekel

60,707
10
101
129

Thanks but I really need to use CSS – Samul Aug 18 '17 at 22:37
You can't use css for that. What if the background color was from the css and not from the style attribute? – Dekel Aug 18 '17 at 22:39

Ali Adlavaran · Answer 2 · 2017-08-18T22:42:23.770

0

If you don't want to use JQuery, There is a pretty good way to use CSS3 [attribute*=value] Selector to achieve that:

#xxx > div(style*="background:#000")
{
   ...
}

BUT

Notice 1: keep this in your mind that as attribute selectors don't support regular expressions, you can only perform exact sub-string matches of the attribute value.

Notice 2: You have to use inline mode style, otherwise it does not work.

I hope to be helpful :)

edited Aug 18 '17 at 22:42

answered Aug 18 '17 at 22:32

Ali Adlavaran

3,697
2
23
47

Does the background has to be set inline to this work? – Samul Aug 18 '17 at 22:38
I believe it does. – A Hettinger Aug 18 '17 at 22:40
Your answer is the best, I will check it! Just tell me why this is not working "#barra_fixa_horizontal_topo(style*="background:#FFFFFF") .ui.menu>.item" – Samul Aug 18 '17 at 22:40
I am seeting the collor to the element using #FFFFFFF but when I inspect with chrome dev tools it shows rgb(255,255,255) so what should I use in the expression my friend? – Samul Aug 18 '17 at 22:43
My friend your answer looks good but this is not even working "#barra_fixa_horizontal_topo(style*="background:") .ui.menu>.item:hover{" – Samul Aug 18 '17 at 22:44
NOT `(style*="background:")` . Try `(style*="background:#000")` or `(style*="background:#FFFFFF")` – Ali Adlavaran Aug 18 '17 at 22:46
My friend your solution I think there is something wrong. I just created a simple example with a single element with any background setted inside it and still does not work. I am trying this -> #barra_fixa_horizontal_topo(style*="*background*") and this does not work. – Samul Aug 18 '17 at 22:49
according to this https://www.w3schools.com/cssref/sel_attr_contain.asp you should not use parenthesiss but [] – Samul Aug 18 '17 at 22:55
Yes. You're right. But you dont need to use parenthesis. – Ali Adlavaran Aug 18 '17 at 22:59
The issue here is that you're using parentheses `(...)` but the selector uses square brackets `[...]`. Other than that, it seems to meet OP's requirements – Matheus Avellar Aug 18 '17 at 23:09
Also the issue here is the use of color in the form #000. Browsers match color using RGB in the css style selector. – Samul Aug 19 '17 at 11:29

score 0 · Answer 3 · answered Aug 18 '17 at 22:33

0

As far as I know this isn't possible.

You could do it with jQuery.

But a better option might be something like this:

.black { background-color: #000000; }
.red { background-color: #ff0000; }
#xxx > .black { padding: 10px; }

answered Aug 18 '17 at 22:33

MrCarrot

2,546
1
23
29

Good catch but I need to select based in the color cause it changes dynamically, I cant create a class to each bakground color possible that may be assigned to the element. – Samul Aug 18 '17 at 22:38

score 0 · Accepted Answer · answered Aug 18 '17 at 23:02

Some of you said this is not possible but it is possible. It's very possible. You just need to take care with the color, browsers (Chrome and Firefox latest that I could try) allow selection based in the background color BUT it has to be in RGB format and you need to use a space after the comma in the color. This will work perfectly:

#xxx[style*="background: rgb(255, 255, 255)"]>div:hover{
    border:10px solid #000000;
}

Select element based in css property

4 Answers4