Title rewritten to: CSS > Select first element in tree

Question

I've been trying to select only the first blockquote in the body of the email, which goes something like this:

<div class="myclass">
    <br><p></p>
    <div><div> <!--sometimes less, sometimes more divs-->
        <blockquote> <!--The blockquote I want to select-->
            <div> <div> <br>
                <blockquote>
                    <Wait...>
                </blockquote>
            </div> </div>
        </blockquote>
    </div></div>
</div>

The problem is, the formatting may vary from email to email, and there may be one or more divs before the first blockquote,

So use:

.myclass > div > div > blockquote {}

Not always valid,

This:

.myclass blockquote:first-of-type {}

Each blockquote will be selected

So I only want to select the first blockquote regardless of its position on the html tree.

Answer 1

Like this? Selects the first nested blockquote of the container .myclass, but does not select any blockquote## that is a child of the first blockquote #.

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

<div class="myclass">
  <br>
  <p></p>
  <div>
    <div>
      <!--有时少有时多的div-->
      <blockquote>
        <!--我想选择的blockquote-->
        <div>
          <div> <br>
            <blockquote>
            </blockquote>
          </div>
        </div>
      </blockquote>
    </div>
  </div>
</div>