Apply style to grandparent if grandchild has class (SCSS)

Question

So the question is how to apply a style to the tr(background color) if contains a div with class selected on it.

<table>
<tr>
  <td>
    <div class="selected">1</div>
  </td>
  <td>
    <div>2</div>
  </td>
  <td>
    <div>3</div>
  </td>
</tr>
<tr>
  <td>
    <div>3</div>
  </td>
  <td>
    <div>4</div>
  </td>
</tr>
</table>

Not possible in CSS, you'd need javascript for this or apply the selected class to the parent itself. — posixpascal, Apr 13 '18 at 11:02
You don't have a parent selector in css... You can just select children and style them. You have to do some JS or JQuery to solve this. I can make you an example? — webta.st.ic, Apr 13 '18 at 11:06
See https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Athul Nath, Apr 13 '18 at 11:07

score 1 · Accepted Answer · answered Apr 13 '18 at 11:09

You don't have a parent selector in css... You can just select children and style them. You have to do some JS or JQuery to solve this. The easiest way is to use jQuery. You can select the parent element and add a class to it:

jQuery parent(): https://api.jquery.com/parent/

Also see this post about css parent selector: Is there a CSS parent selector?

There are also other ways to solve this with JS/jQuery, but you have to use it, there's no other way.

$('.selected').parent().parent().addClass('trBackground');

.trBackground {
  background-color: lightcoral;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="selected">1</div>
    </td>
    <td>
      <div>2</div>
    </td>
    <td>
      <div>3</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>3</div>
    </td>
    <td>
      <div>4</div>
    </td>
  </tr>
</table>

Apply style to grandparent if grandchild has class (SCSS)

1 Answers1