Question

Okay, the title is worded terribly, I know. I really don’t know exactly how to describe this.

I am editing a “website” but I don’t have access to HTML or Javascript or PHP or anything else. Only CSS, and I can creatively manipulate the HTML already presented in the website.

<div id="list">
<table>
 <tbody>
  <tr>
   <td class="td1">blahblahblah</td>
   <td class="td1">blahblahblah</td>
   <td class="td1">blahblahblah</td>
   <td class="td1"><a href="bleach.com">Bleach</td>
   <td class="td1">Score: 9</td>
  </tr>
 <tbody>
</table>

<table>
 <tbody>
  <tr>
   <td class="td2">blahblahblah</td>
   <td class="td2">blahblahblah</td>
   <td class="td2">blahblahblah</td>
   <td class="td2"><a href="naruto.com">Naruto</a></td>
   <td class="td2">Score: 10</td>
  </tr>
 <tbody>
</table>
</div>

So this is basically how it’s set up. These are 2 anime, Bleach and Naruto. Naruto’s score is a 10, Bleach’s is a 9. My goal is to select the parent table of the anime that contains a score of 10 so that I can set up a specific hover animation event using keyframes whenever an anime with a score of 10’s table is hovered over.

Now the way this is set up, I don’t think there’s any way to do it other than manually selecting each anime with a score of 10 by doing something like #list > table > td:nth-of-type(4) a[href*=”naruto.com”] though I’m not sure that’s relevant. That’s how I can select the child, but how do I select the table parent to style it for hover? There must be a way. 🙁

Appreciate any help you can offer. If you leave a comment within the next day I should be able to respond back immediately.

Thanks.

Please keep in mind, I can not simply give a table a class or id. I have no access to adding or editing anything within the set HTML. So I need to figure out a different method. Also, selecting the table by doing #list table:nth-of-type(n) is not possible because the list of tables will be ever-changing (tables added/removed), can be sorted (altering n), and the sheer volume (we’re talking hundreds of tables) etc. which would throw it out of play.

Answer 1

This is not possible using only CSS. You need to select for an attribute at least. There was a proposal for a :content selector for CSS 3, but that didn’t end up in the spec. (More info here).