Can you use CSS to reference a parent or child of a certain object?

Question

Hi all,

I guess I am spoiled with JavaScript. If you want to change something about the parent, you can code something like parentNode.style.etc.

 
<TABLE id="hasID">
  <TBODY>
    <TR>
      <TD>
        <IMG id="hasID2" src="somePicture.png">
        <IMG id="hasID3" src="someOtherPicture.png">
      </TD>
    </tr>
    <tr>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>

As you can see from my code table has an id, and the img tags have ids. What I would like to do is add a stype class to the first TD, so that all the images are aligned to the left or middle, that kind of thing.

However, here is a tricky part, I don't want to user JavaScript, because it looks to slow. Everything starts out on the right, and then jump to the center, after everything is loaded.

Also, here is a second tricky part. I can't change add a class to the TD, because it generated by JSF.

So my main question is can I do this with CSS.

UPDATE:

I don't really need to reference a parent. Referencing a child will also work for me.

Answer 1

Sorry no way to select parent in css.

http://stackoverflow.com/questions/1014861/css-parent-selector

Answer 2

You can't select a parent via CSS. It was proposed as a feature but it's not even close to implementation.

I will suggest that you move any javascript you have to just after the content above, which means that it will run as soon as that part of the section is rendered, thus removing any delay.

<TABLE id="hasID">
  <TBODY>
    <TR>
      <TD>
        <IMG id="hasID2" src="somePicture.png">
        <IMG id="hasID3" src="someOtherPicture.png">
      </TD>
    </tr>
    <tr>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
    var img = document.getElementById("hasID2");
    img.parentNode.style.textAlign = "right";
</script>

Inline Javascript is OK to use in these scenarios.

Answer 3

Not sure if this will help, but I'll mention that you can add classes using JSF with styleClass="", depending on how you are generating the table. There is also a columnClass="" if you are putting these in a datatable.