CSS: селектор последнего типа не работает как ожидалось

Question

Я хотел использовать селектор :last-of-type, чтобы выбрать последний элемент кнопки в меню страницы, которое я создавал. Но это не работает, как ожидалось, и я не могу понять, почему:/

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 Я хочу использовать:

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

Я ожидал, что это выбрать последний но он выбирает первый. Я довольно новичок в HTML/CSS, так что это может быть очевидно, но было бы неплохо с некоторой помощью. Благодарю.

Answer 1

вы не закрываем эти дивы

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

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

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

, так как вы не загораживая Див кнопки рассматриваются как дети этих DIV и, следовательно, нет более поздние дети MediaInnholdFortegnelse, поэтому первая кнопка всегда будет последним ребенком, который является непосредственным ребенком MediaInnholdFortegnelse

Модифицированный код

#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>

Answer 2

Если каждая кнопка имеет родительского DIV, вам нужно использовать div:last-of-type button

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

Я сделал пример:

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

Answer 3

Вы используете ">" Зарегистрируйтесь в вашем CSS. Он ловит только ближайших детей. И первая кнопка - это только ближайшие дети. А также проверьте свои теги div. Возможно, вы не закончили теги div в своем коде