I'm trying to target the parent element of whatever element is the current :target
of the page.
Here is, roughly, my table structure (the parts that matter)
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td><strong><a class="anchor" id="teammate_row_1"></a>Name 1</strong></td>
</tr>
<tr>
<td><strong><a class="anchor" id="teammate_row_2"></a>Name 2</strong></td>
</tr>
<tr>
<td><strong><a class="anchor" id="teammate_row_3"></a>Name 3</strong></td>
</tr>
</table>
I put the anchor element as part of the table this way instead of the entire row, because I have a header on my website which means that if I anchored the entire row, the row would be hidden behind my header after it scrolls to the element, so the anchor element must remain in this spot.
This is my CSS for the anchor element
a.anchor {
display: block;
position: relative;
top: -90px;
visibility: hidden;
}
Now, when someone clicks a link and gets to one of these anchor points, I want to sort of highlight the row that is selected to be a different color, so that it stands out more.
I am aware of the :target
CSS selector, which should allow me to change the CSS of a the element selected, however, I do not need to change the actual target's CSS, I need to change it's parents css.
I've tried the following CSS selectors:
- :target > tr
- :target > strong > tr
- :target < tr
- :target < strong < tr
- :target:parent
- :target:parent:parent (Wasn't sure if was counted as a parent)
But nothing has given me any results.
I've seen in the comments that it's mentioned there is no CSS parent selector, but I could also use JavaScript/jQuery as a solution. How can I do this?