CODEWITHSUNDEEP
css-selectors
PB_MLT
PB_MLT

Reputation: 834

CSS Selector in a tree like structure

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

Upvotes: 0

Views: 1336

Answers (1)

Zibellino
Zibellino

Reputation: 1433

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)

Upvotes: 1

Related Questions