Select most top level element

Question

I have a html code :

<div class="body">
    <p></p>
    <div class="select">
        <p class="p1"></p>
        <div class="select"></div>
        <p class="p2"></p>
    </div>
</div>

I want to select div element with class select. There are two element of this type which I want the parent one. How can I do that? Pay attention that the above code is just an example and the code can become complex arbitrarily.

Two div elements with same class may not be direct child and parent of each other and I want to do this by css-selectors if possible.

@Paulie_D I don't think that is a duplicate - if anything the is there a [parent selector](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) question would be more of a duplicate OP is looking for root of class not first of class — Pete, Feb 27 '19 at 15:10

James Coyle · Answer 1 · 2019-02-27T14:34:59.830

Style the .select and then overwrite those styles in .select .select:

.select {
  /* top level select element */
  color: red;
}

.select .select {
  /* reset styles in nested select element */
  color: initial;
}

<div class="body">
    <p>Text</p>
    <div class="select">
        <p class="p1">Top Level Select</p>
        <div class="select">Nested Select</div>
        <p class="p2">Top Level Select</p>
    </div>
    <div>
        <p class="p1">Text</p>
        <div class="select">Top Level Select</div>
        <p class="p2">Text</p>
    </div>
</div>

Select most top level element

1 Answers1