CSS Selector in a tree like structure

Question

I have a tree like structure in HTML, and starting from the root, I would like to access only the content of its direct children using CSS selectors. Note that I don't have control on the structure of the HTML, so I cannot change it.

An example will help a lot here. Consider the following HTML code:

        <div class="node">
            <div class="children">
                <div class="node">
                    <div class="children">
                        <div class="node">
                            <div class="children">

                            </div>
                            <div class="content">
                                <p class="name">Quarter-Final 1</p>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <p class="name">Semi-Final 1</p>
                    </div>
                </div>
                <div class="node">
                    <div class="children">
                        <div class="node">
                            <div class="children">

                            </div>
                            <div class="content">
                                <p class="name">Quarter-Final 2</p>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <p class="name">Semi-Final 2</p>
                    </div>
                </div>
            </div>
            <div class="content">
                <p class="name">Final</p>
            </div>
        </div>

I would like to get only the names of Semi-Final 1 and Semi-Final 2. Ideally with one CSS selector. How can it be done?

Thanks

.node > .children > .node > .content > .name:not(.node > .children > .node > .children .content > .name) — Szabolcs Páll, Aug 04 '15 at 07:39
@PB_MLT: That's not a valid CSS selector. That couldn't have done the job... unless you're using jQuery. In which case you're not talking about a CSS selector. — BoltClock, Aug 04 '15 at 10:58
@BoltClock Which part of it is not valid? How does jQuery change that? — Szabolcs Páll, Aug 04 '15 at 11:25
@Szabolcs Páll: The entire :not() portion. See http://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css — BoltClock, Aug 04 '15 at 11:26
@BoltClock I am using JQuery, that's why it worked. If I wasn't using JQuery how would you have done it ? — PB_MLT, Aug 04 '15 at 15:26

Szabolcs Páll · Accepted Answer · 2015-08-04T11:35:13.073

1

Something along these lines (works only with jQuery at the moment, will work in CSS4):

.node > .children > .node > .content > .name:not(.node > .children > .node > .children .content > .name)

edited Aug 04 '15 at 11:35

answered Aug 04 '15 at 07:57

Szabolcs Páll

1,402
6
25
31

CSS Selector in a tree like structure

1 Answers1