0

I would like some help with writing some CSS that can be used to express the following: If this element has a child element with a certain class attached, style it as follows.
What am trying to do is have a CSS class attached to a child element influence the styling on the parent - not the "usual" way of having a CSS class attached to a parent element influence the styling to be applied to the child.

For instance, take the following html:

<table>
    <tr>
        <td><span>One</span></td></li>
        <td><span class="highlight">Two</span></td>
        <td><span>Three</span></td>
    </tr>
</table>

I would be trying to write some CSS to style a <td> that finds itself with a child <span> with the class "highlight" a particular way - say, apply a red border to the <td>

FYI: I am aware of ways this can be achieved using jQuery dynamically using something like

$("span.highlight").parent().addClass("styling-class");

or

$("span.highlight").parent().css({"border": "1px #ff0000 solid"});

but lets say this solution does not render itself particularly easy to apply in my situation hence the reason am seeking a way to express it using CSS in my stylesheet file. I am neither a novice nor an expert in matters CSS. Is what am trying achievable?

John Gathogo
  • 4,495
  • 3
  • 32
  • 48
  • 4
    That's not possible in pure CSS. You must use JS, or rethink your strategy. – bfavaretto Oct 24 '12 at 18:16
  • CSS does not have a method of accessing parent elements, so it can't be done the way you've asked. Look at the reason why you can't do it with jQuery and try to tackle it from that angle. – Reinstate Monica Cellio Oct 24 '12 at 18:16
  • @bfavaretto: `not possible in pure CSS` This is for a fact? I guess I should refocus my energy on a workaround. – John Gathogo Oct 24 '12 at 18:26
  • The principle behind this is incremental rendering. If there was such a pseudo class like `span:parent: border: 1px solid red` the browser would have to wait until the whole document is loaded. It is against CSS' principles. You should look for a workaraound – pfried Oct 24 '12 at 18:29
  • @JohnGathogo Yes, that's a fact. CSS does not provide any way to target parent/ancestor elements. – bfavaretto Oct 24 '12 at 18:45
  • 1
    possible duplicate of [Complex CSS selector for parent of active child](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child) – Dan J Oct 24 '12 at 23:50
  • @DanJ: Thanks. The question you referred/linked to seems to cover most of the questions I had exhaustively. I already voted to have the question closed – John Gathogo Oct 25 '12 at 18:01
  • possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – stevenw00 Jul 08 '15 at 09:21

0 Answers0