JustAnotherPerson JustAnotherPerson - 1 month ago 5
CSS Question

CSS :last-of-type selector not working as expected

I wanted to use the

:last-of-type
selector to select the last button element in a page menu that I was creating. But it is not working as expected and I can not find out why :/

HTML:

<div id="MediaHTML">
<div id="MediaInnholdFortegnelse">
<h1>MEDIA KATEGORIER</h1>
<button type="button", id="MIF-Bilder">
<div class="MIF-ButtonContent">
<i class="material-icons md-c">arrow_drop_down</i>
<p>Bilder</p>
</div>
</button>
<div id="MIF-Bilder-Content", class="MIF-Content">
<button type="button", id="MIF-Lydfiler">
<div class="MIF-ButtonContent">
<i class="material-icons md-c">arrow_drop_down</i>
<p>Lydfiler</p>
</div>
</button>
<div id="MIF-Lydfiler-Content", class="MIF-Content">
<button type="button", id="MIF-Videoer">
<div class="MIF-ButtonContent">
<i class="material-icons md-c">arrow_drop_down</i>
<p>Videoer</p>
</div>
</button>
<div id="MIF-Videoer-Content", class="MIF-Content">
<button type="button", id="MIF-Skjema">
<div class="MIF-ButtonContent">
<i class="material-icons md-c">arrow_drop_down</i>
<p>Skjema</p>
</div>
</button>
<div id="MIF-Skjema-Content", class="MIF-Content">
</div>
</div>


CSS I want to use:

#MediaInnholdFortegnelse > button:last-of-type {
padding-bottom: 0.46vw;
}


I was expecting it to select the last button element, but it selects the first one.
I am quite new to HTML/CSS so it might be obvious, but it would be nice with some help. Thanks.

Answer

you are not closing these divs

<div id="MIF-Bilder-Content", class="MIF-Content">

<div id="MIF-Lydfiler-Content", class="MIF-Content">

<div id="MIF-Videoer-Content", class="MIF-Content">

since you are not closing the div the button are treated as children of these div and hence it is no longer immediate children of MediaInnholdFortegnelse and so first button will always be the last child which is immediate child of the MediaInnholdFortegnelse

Modified code

#MediaInnholdFortegnelse > button:last-of-type {
    padding-bottom: 0.46vw;
  color:#f00;
}
<div id="MediaHTML">
    <div id="MediaInnholdFortegnelse">
        <h1>MEDIA KATEGORIER</h1>
        <button type="button", id="MIF-Bilder">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Bilder</p>
            </div>
        </button>
        <div id="MIF-Bilder-Content", class="MIF-Content"></div>
        <button type="button", id="MIF-Lydfiler">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Lydfiler</p>
            </div>
        </button>
        <div id="MIF-Lydfiler-Content", class="MIF-Content"></div>
        <button type="button", id="MIF-Videoer">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Videoer</p>
            </div>
        </button>
        <div id="MIF-Videoer-Content", class="MIF-Content"></div>
        <button type="button", id="MIF-Skjema">
            <div class="MIF-ButtonContent">
                <i class="material-icons md-c">arrow_drop_down</i>
                <p>Skjema</p>
            </div>
        </button>
        <div id="MIF-Skjema-Content", class="MIF-Content">
    </div>
</div>