How can I select a “last-child of a last-child”?

Question

I'm trying to select the last element contained in the last col-xs-12 div with CSS. The thing is that the element is dynamic, so it can be an h2 or h3 etc.

<div class="banner-text-img">
  <div class="row">
     <div class="col-xs-12">
     </div>
     <div class="col-xs-12">
     </div>
     <div class="col-xs-12">
       <p>...</p>
       <h1>...</h1>
     </div>
  </div>
</div>

I achieved that by selecting tag by tag, but that's not probably the perfect choice.

.banner-text-img div[class^="col"]:last-child h1, .banner-text-img div[class^="col"]:last-child h2... etc.

Answer 1

You can use the asterisk * to select any element and use :last-child to target the last element.

.col-xs-12 > *:last-child

https://codepen.io/paulbremer/pen/JxEwbx

Answer 2

您可以使用星号*

 .banner-text-img div[class^="col"]:last-child *:last-child