CODEWITHSUNDEEP
javascriptcssdom
Urša Lesnik
Urša Lesnik

Reputation: 21

Get the last element in HTML structure

Can I access the last div with the + content only with css & child combinators? I would like to style it.

<body>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      +
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

with :last child i can't reach so deep into the tree.

Upvotes: 1

Views: 98

Answers (1)

Barmar
Barmar

Reputation: 782785

The selector div:(not(:has(div)) will match any DIV that doesn't have another DIV nested inside it.

:has(selector) matches an element whose contents include an element that matches selector. Putting this in :not() reverses the condition.

This is a relatively new CSS selector, and it's not yet supported by Firefox as of version 108. See the compatibility table.

div:not(:has(div)) {
  color: red;
}
<body>
  a
  <div>
    b
    <div>
      c
      <div>
        d
        <div>
          e
          <div>
            f
            <div>
              g
              <div>
                h
                <div>
                  i
                  <div>
                    j
                    <div>
                      +
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Upvotes: 3

Related Questions