Give CSS property to parent td using CSS

Question

I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:

<td>
  <div id="div1">
      <div id="div2" class="colorMe"></div>
  </div>
</td>

Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.

I have used CSS like this but not working:

td > div> div.colorMe { 
background-color:yellow;
}

Can you please tell me how I can color my td using css?

Please take a look at [this question](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Flying, Nov 15 '17 at 09:32
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Flying, Nov 15 '17 at 09:32
@ankitapatel Please just use vanilla js for this, no need to include jQuery. — roberrrt-s, Nov 15 '17 at 11:01
^ Second and third. Don't go off trying to learn jQuery just to do this simple task — Callat, Nov 15 '17 at 16:50

score 1 · Answer 1 · answered Nov 15 '17 at 09:37

1

There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.

answered Nov 15 '17 at 09:37

Matthias Seifert

1,897
2
24
35

1

`:has-focus` is as of Nov 2017 the best 'alternative' to a parent selector that is widely supported. – roberrrt-s Nov 15 '17 at 11:02
1

have you any link to a documentation on how to use this in this case? No sarcasm, I'm really interested and can't find anything ¯\_(ツ)_/¯ – Matthias Seifert Nov 15 '17 at 11:05
1

I'm silly, it was `:focus-within` and it's on CSS tricks here: https://css-tricks.com/almanac/selectors/f/focus-within/ – roberrrt-s Nov 15 '17 at 11:07
'widely supported' ? not supported in IE, Edge, Opera(Mobile,Mini), Android Browsers and overall support only in new version of the other browsers . Not a good ideea to use it just yet – Mihai T Nov 15 '17 at 11:36
`:focus-within` is not a replacement to the generic parent selector. It only works, as its name suggests, if there is something focusable somewhere in the element and that thing is focused. It's not much helpful in the OP's case. – Ilya Streltsyn Nov 15 '17 at 18:36
68.78% of all users are supported, according to caniuse, we can discuss what 'widely' would mean.. – roberrrt-s Nov 15 '17 at 22:57

score 0 · Answer 2 · answered Nov 15 '17 at 17:06

I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.

Here is a small example of changing a parent div's color on a click event

var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
  this.parentNode.style.backgroundColor = "white";
});

div {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

.color1 {
  background-color: red;
}

.color2 {
  background-color: rebeccapurple;
  width: 50px;
  height: 20px;
}

<div class="color1">
  <div class="color2"></div>
</div>

score 0 · Answer 3 · answered Nov 15 '17 at 18:34

You can kind of emulate the behavior you need with the following trick:

td {
  position: relative; /* make the cell a container for positioned children */
}

.colorMe::before { /* cover this container with colored pseudo element */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color:yellow;
  z-index: -1;
}

table { /* just to make the example prettier :) */
  width: 100%;
  height: 100px;
  table-layout: fixed;
}

<table>
  <tr>
    <td>
      Just a TD
    </td>
    <td>
      <div id="div1">
          <div id="div2" class="colorMe"></div>
      </div>
    </td>
    <td>
      Just a TD again
    </td>
  </tr>
</table>

It won't work, however, if you need to position something absolutely from the .colorMe element itself.

Give CSS property to parent td using CSS

3 Answers3