How to access parent element in CSS?

Question

I want to access parent element of anchor tag

<td class="class1">
    <div id="id1">
        <a class="class2" id="id2" href="link">Link</a>
    </div>
</td>

I tried using CSS: .class2:parent:parent {}

but this does not seem to work. Is it possible to achieve the same in CSS? I do not have flexibility to use jQuery on the page.

yes, i searched some site. found it here: http://css-tricks.com/parent-selectors-in-css/ but, this does not seem to be working in firebug! — ipradhansk, Dec 27 '13 at 15:41
Read the top of the article.. it says: *"there are no parent selectors in CSS"* — Josh Crozier, Dec 27 '13 at 15:42
or restructure your html and put a class on the parent element — Zach Lysobey, Dec 27 '13 at 15:43
Why you need to access the parent?? what are you trying to do? — DaniP, Dec 27 '13 at 15:45
There is a standard style defined for all the elements for the page. But there is one particular link for which we need no add different style using `important'... — ipradhansk, Dec 27 '13 at 15:48
@SanTosh we can probably reccommend a workaround (or hack ;-) for you if you give us more details about exactly how you want to restyle. You cannot move back "up" the DOM with CSS. only "down"., but you can of course access the parent directly (`#id1`), or otherwise use tricks on the `` in question (like `::before` or `::after` pseudo-elements) to do some stuff you might not expect was possible. — Zach Lysobey, Dec 27 '13 at 15:51
[Zach L](http://stackoverflow.com/users/363701/zach-l), actually i need access to class1. Though your solution(moving the CSS down in the DOM) sounds like the solution that should work :) — ipradhansk, Dec 27 '13 at 15:55

score 6 · Accepted Answer · answered Dec 27 '13 at 15:43

You can't do this without using Javascript. I highly recommend JQuery, it has a parent function to access parent items.

CSS traditionally does not have a parent selector because of performance. See http://snook.ca/archives/html_and_css/css-parent-selectors

I strongly recommend reading that as it describes how CSS is parsed by the browser and why it has it's limitations. Here's an excerpt:

On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven't worked on a browser engine, I have my theories.

In short: performance.

How CSS gets evaluated With work, I've had to do quite a bit of examination of performance. We run a number of tools over an application to determine where the bottlenecks are. One such application is Google Page Speed which provides a number of recommendations to improve JavaScript and rendering performance. Before I get into its recommendations, we need to understand a little better about how browsers evaulate CSS.

How to access parent element in CSS?

1 Answers1