CODEWITHSUNDEEP
htmlcsscss-selectors
JustAnotherPerson
JustAnotherPerson

Reputation: 101

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.

Upvotes: -1

Views: 128

Answers (3)

Ashique
Ashique

Reputation: 355

You are using ">" Sign in your CSS. It catches only the immediate children. And the first button is the only immediate children here. And also check your div tags. Maybe you did not finish your div tags in your code

Upvotes: 0

xcatliu
xcatliu

Reputation: 839

If each button have a parent div, you need to use div:last-of-type button

#MediaInnholdFortegnelse > .MIF-Content:last-of-type button {
    padding-bottom: 100px;
}

I've made an example:

https://jsfiddle.net/d3xj03tq/1/

Upvotes: 0

Atal Kishore
Atal Kishore

Reputation: 4738

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>

Upvotes: 1

Related Questions