0

I have multiple div container "footer-ad-button". Some of these are in a div container called "platinum" others in "gold". The following CSS code behaves pretty weird to me. If i have both ads active, platinum and gold, the "margin-bottom: 0" works only for the last gold ad, but not for the last platinum ad. If i deactivate all gold ads, it works for the last platinum ad.

Conclusion: Somehow this code works only for one of both last-of-type css rules (depends on which html is active), but i don't see any reason why it behaves like this.

CSS:

.ad .footer-ad-button{
    margin-bottom: 20px;
}
.ad > div > .platinum:last-of-type > .footer-ad-button,
.ad > div > .gold:last-of-type > .footer-ad-button{
    margin-bottom: 0;
}

HTML:

<div class="ad"> 
                <div class="row">
                    <div class="platinum">
                    <div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
                        <div class="advertise-inner"></div>
                    </div>
                    </div>  
                    <div class="platinum">
                    <div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
                        <div class="advertise-inner"></div>
                    </div>
                    </div>  
                    
                    <div class="gold">
                    <div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
                        <div class="advertise-inner"></div>
                    </div>
                    </div> 
                    <div class="gold">
                    <div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
                        <div class="advertise-inner"></div>
                    </div>
                    </div> 
                </div>
    </div>
Dapp Future
  • 165
  • 1
  • 12
  • You can't have HTML elements in a button. If you do they will behave weirdly. Probably not the problem here - just for your info. – Wais Kamal May 02 '21 at 10:19
  • Well, not all of them anyway. You can have non-interactive phrasing elements in a button. – BoltClock May 02 '21 at 10:21
  • It's not the button, there is no change in behaviour if i change it to a div. – Dapp Future May 02 '21 at 10:23
  • 1
    The closest duplicates of this question kinda suck ([this](https://stackoverflow.com/questions/13211453) one's halfway decent, but it's closed a duplicate of [this](https://stackoverflow.com/questions/6401268), whose answers are either wrong or completely missing the point), so I'm just going to point you to the absolute most general question about this: https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector In short, the "type" refers to the tag name, which in this case is div. – BoltClock May 02 '21 at 10:26

1 Answers1

1

last-of-type selects the last element with that type (not class, not id), so while you are expecting .platinum:last-of-type to select the last element with class platinum (which is not necessarily the last element of that type), it is selecting the element which has the platinum class AND is the last child element with that type in its parent. In your case, that type is a <div>, but it could've as well been a <section> or something else.

Currently the CSS specification does not define such a selector that does what you are aiming for, so you will need to introduce some javascript to dynamically select the elements you want.

Wais Kamal
  • 5,858
  • 2
  • 17
  • 36
  • "is the last child element of its parent" would be :last-child. This is :last-of-type, which matches the last div (and would still match the last div.gold, if its following sibling was something other than a div). – BoltClock May 02 '21 at 10:30
  • Sorry, you are right. I will edit accordingly. – Wais Kamal May 02 '21 at 10:32
  • I get the point. In that case i could do a workaround with a div for one class (gold) and a span for the other class (platinum). With that i have 2 elements that i can use a last-of-type on, instead of using javascript. – Dapp Future May 02 '21 at 10:33
  • This is also possible, yes. – Wais Kamal May 02 '21 at 10:39