CSS: select parent element when child a:active?

Question

Most if not all CSS selectors effect a child element of a parent, what I need to do is select the parent when the child 'a' is in an active state. Please see HTML below:

<tbody>
    <tr class="row-1">
        <td class="col-1 descriptionClass">
            <div class="views-field views-field-title">
                <span class="field-content">
                    <a href="/listen-again/2128">a thing...</a>
                </span>  
            </div>          
        </td>
    </tr>
</tbody>

I need to select "td class='col-1 descriptionClass'" when "a href='/listen-again/2128'>a thing.../a" is active.

Have seen this: Selecting Parent of a Child in CSS but need to use CSS, not JS or Jquery.

Please note there is little I can do to edit the HTML itself as I am using a content management system (Drupal). I have tried a number of selectors but nothing working to date.

Any (constructive) input most appreciated.

Sadly, this isn't possible. See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector. Maybe in CSS 4. — dgvid, Apr 03 '14 at 14:14
You need to solve this problem at the Drupal level instead of at the CSS level (since you can't solve this problem with CSS alone). Or, you can use JavaScript. — thirtydot, Apr 03 '14 at 14:18

score 0 · Accepted Answer · answered Apr 03 '14 at 14:14

0

Very sorry to break it to you, but there is no way to select a parent in CSS.

You may find the discussion in this article interesting if you're wondering why.

answered Apr 03 '14 at 14:14

kmoe

1,963
2
15
27

I knew about the right to left evaluation, and it makes sense in the context of the DOM tree structure - is this not the quickest way to evaluate...? – user1360809 Apr 03 '14 at 14:24

CSS: select parent element when child a:active?

1 Answers1