how to select the parent element of a element

Question

I am aware of the :has() proposal but this is not working yet.

My question is how to toggle the font-weight of AAAAAAA and BBBBBBB to bold when PUSH1 Button is clicked. And the CCCCCCC and DDDDDDD when PUSH2 is pressed.

<table>
  <tr>
    <td>AAAAAAA</td>
    <td>BBBBBBB</td>
    <td><button id="1" tabindex="0">PUSH1</button></td>
  </tr>
  <tr tabindex="0">
    <td>CCCCCCC</td>
    <td>DDDDDDD</td>
    <td><button id="2" tabindex="0">PUSH2</button></td>
  </tr>
  <tr>
    <td>EEEEEEE</td>
    <td>BBBBBBB</td>
    <td><button id="3" tabindex="0">PUSH3</button></td>
  </tr>
</table>

tr:has(> button:focus)
{
  font-weight: bold;
}

I am trying to find a solution with CSS

To make toggle effect, you need to use JavaScript or jQuery. Its much easier with jQuery. — Gosi, May 11 '21 at 03:45
from the duplicate: https://stackoverflow.com/a/46406959/8620333 — Temani Afif, May 11 '21 at 10:29
If we continue this way we will end up on stack overflow having only one question, and this will be a political correct question that asks nothing. — Max Muster, May 11 '21 at 11:01

Hao Wu · Accepted Answer · 2021-05-11T04:40:22.753

You can achieve that using :focus-within pseudo class:

tr:focus-within {
  font-weight: bold;
}

<table>
  <tr>
    <td>AAAAAAA</td>
    <td>BBBBBBB</td>
    <td><button id="1" tabindex="0">PUSH1</button></td>
  </tr>
  <tr tabindex="0">
    <td>CCCCCCC</td>
    <td>DDDDDDD</td>
    <td><button id="2" tabindex="0">PUSH2</button></td>
  </tr>
  <tr>
    <td>EEEEEEE</td>
    <td>BBBBBBB</td>
    <td><button id="3" tabindex="0">PUSH3</button></td>
  </tr>
</table>

Edit

You can make it togglable without using javascript. But you need to change your DOM structure and utilize checkboxes. Which is quite confusing. So most of the time you would want to use javascript instead.

input[type="checkbox"] {
  display: none;
}

table label {
  cursor: pointer;
  border: solid 1px black;
  border-radius: 2px;
}

#row1:checked ~ table tr:nth-child(1),
#row2:checked ~ table tr:nth-child(2),
#row3:checked ~ table tr:nth-child(3) {
  font-weight: bold;
}

<input type="checkbox" id="row1" />
<input type="checkbox" id="row2" />
<input type="checkbox" id="row3" />

<table>
  <tr>
    <td>AAAAAAA</td>
    <td>BBBBBBB</td>
    <td><label id="1" for="row1" tabindex="0">PUSH1</label></td>
  </tr>
  <tr tabindex="0">
    <td>CCCCCCC</td>
    <td>DDDDDDD</td>
    <td><label id="2" for="row2" tabindex="0">PUSH2</label></td>
  </tr>
  <tr>
    <td>EEEEEEE</td>
    <td>BBBBBBB</td>
    <td><label id="3" for="row3" tabindex="0">PUSH3</label></td>
  </tr>
</table>

I stand corrected. It looks like it can only be toggled by clicking or by focusing elsewhere, which actually makes sense because every time you click a button, you are redirecting the focus within the parent element. — iismaell, May 11 '21 at 03:49
@MaxMuster I updated an alternative solution. Maybe it could be helpful. — Hao Wu, May 11 '21 at 04:41

score 1 · Answer 2 · answered May 11 '21 at 02:36

1

This is not yet possible with css, so a jQuery or a Javascript solution is needed.

Better explained here: Is there a CSS parent selector?

A solution was provided in the same thread, but it may not work in your case.

answered May 11 '21 at 02:36

iismaell

391
1
7

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/28949368) – Enea Dume May 11 '21 at 10:41
I am the OP: more then this, I write in the first line that I am aware of this. – Max Muster May 12 '21 at 08:35

score 1 · Answer 3 · answered May 11 '21 at 02:43

My other thought, aside from ismaell's comment, was to use an adjacent sibling selector. Unfortunately, this isn't possible with previous siblings either. There may be a way to hack your way through with positioning so the button looks to be the first element but is the last in each row, but that seems like a lot...

you could also probably try to have the button first, but it might look goofy.

Is there a "previous sibling" selector?

The best thing to do is probably to bite the bullet and use javascript to save the day (sorry for the bad news!)

how to select the parent element of a element

3 Answers3

Edit