[solved]CSS > selet first element in tree-CodePudding

I've been trying for an hour now to just select the first blockquote of an email body that looks about like this :

<div >
    <br><p></p>
    <div><div> <!--sometime less sometime more div-->
        <blockquote> <!--the blockquote I wanna select-->
            <div> <div> <br>
                <blockquote>
                    <etc...>
                </blockquote>
            </div> </div>
        </blockquote>
    </div></div>
</div>

the problem is the formating can be different depending on emails and there can be one or several div before the first blockquote,
so using :

.myclass > div > div > blockquote {}

wont work all the time,
this :

.myclass blockquote:first-of-type {}

will select every blockquote

So i just want to select the FIRST blockquote whatever it's position on the html tree

any idea?

CodePudding user response：

Something like this? Selects the first nested blockquote of the container .myclass but not any blockquotes that are children of the first blockquote.

.myclass blockquote:not(blockquote blockquote) {
  background-color: red;
}

<div >
  <br>
  <p></p>
  <div>
    <div>
      <!--sometime less sometime more div-->
      <blockquote>
        <!--the blockquote I wanna select-->
        <div>
          <div> <br>
            <blockquote>
            </blockquote>
          </div>
        </div>
      </blockquote>
    </div>
  </div>
</div>

CodePudding user response：

If you give your <tags an ID="myTag" then you can uniquely identify content.

eg:

 <blockquote id="firstBlock">