Select parent n layers up in the tree using CSS?

Question

I have an app with relatively complex DOM structure with 20+ layers of divs.

If I have a div with class="active" somewhere in the middle of the tree, how can I select it's parent n layers up in the tree using CSS?

For example, how do I select the div marked in uppercase (4 layers up) in the following tree ? :

<DIV>
  <div>
    <div>
      <div>
        <div class="active">
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</DIV>

Same considering first-child ? How to select a first-child n layers down the tree ?

What I mean is "first-child of first-child of first-child" would be a "first child 3 layers down the tree". — bogatyrjov, Jan 05 '13 at 22:30
In that case there's no shortcut, you'll need to do `:first-child > :first-child > :first-child` — BoltClock, Jan 06 '13 at 04:48

score 2 · Answer 1 · edited May 23 '17 at 11:48

2

Unfortunately, there is no such thing as a parent selector. You'll have to set a class on the desired element directly, either by hand, or with some server-side code, or via JavaScript.

edited May 23 '17 at 11:48

Community

1
1

answered Jan 05 '13 at 16:19

Thomas

174,939
50
355
478

score -1 · Accepted Answer · answered Jan 05 '13 at 23:04

Based on this article I found titling CSS4 Preview, it will be possible in CSS4 to style parent elements. The article shows that it would be possible to style parent elements like the following:

$div > div > div > div.active { border: 1px solid #ccc; }

(Given example would style the div nested 3 layers up in the tree related to div.active)

Going back to my app, using PHP and inline CSS, I would be able to control the n (nesting depth).

Until CSS4 though, I will use some kind of jQuery solution.

Select parent n layers up in the tree using CSS?

2 Answers2