Odstęp między newsami

Witam. Chcę zrobić odstęp 30px między 3 pierwszymi newsami, a pod ostatnim żeby było 0px. Raz napisałem ten kod w identyczny sposób i działał. Tym razem głowię się z tym i nic nie idzie. Oto przykład którego ja próbuję użyć w w pliku styl.css:

.news-item {
  margin-bottom: 20px;
}

.news-item:last-child {
  margin-bottom: 0;
}

Do pliku template z newsami daję:

<div class="news-item"></div>

na samym dole. Tak też robiłem przedtem.
Kod jest bardzo prosty, aczkolwiek nie potrafię go naprawić.

Proszę o jakąś radę.

link do strony

Odstępy możesz zrobić za pomocą flexboxa

.wrapper {
  display: flex;
  gap: 30px;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
</div>

Wtedy kasujesz wszystkie marginesy dotyczące klasy .item i ustawiasz flex-direction na column lub row.

Tylko, że ja mam cały template w tabeli

<table>
<tr>
<td>
</td>
</tr>
</table>
<div style="news-item"></div>

chyba chodzi o to, że masz luzem różne rzeczy i żaden .news-item nie jest ostatnim dzieckiem, więc dając last-child nie łapiesz i tak elementu.

chociaż używając .news-item:nth-last-child(1 of .news-item) { udało mi się osiągnąć coś podobnego: https://jsfiddle.net/pftc8Ld9/ tylko nie wiem, czy będzie ci to działać jak to włożysz w całą stronę (w dodatku to of też nie powinno działać wg tabeli wsparcia https://caniuse.com/?search=%3Anth-last-child() więc nie wiem, czemu działa mi na Chrome. Może tabela wsparcia jest niezaktualizowana?).

Można dalej pokombinować z selektorami CSS, ale to brnięcie dalej w chaos. Ja bym na twoim miejscu posprzątał sobie kod. Np. po co jest .news-item, jak zamykasz tego diva od razu?

<div class="news-item"></div>

Jeśli w .news-item masz artykuł w <table>, to chyba powinno być tak:

<div class="news-item">
   <table cellspacing="0" cellpadding="0">
     .......
   </table>
</div>   

?

To by miało sens wtedy jakiś, że wszystko, co jest w środku .news-item, dotyczy jednego news-item. Bo teraz to wygląda jakby tutaj było coś albo zepsute albo jakaś ponura hakerka się odbywała. No i widzę layout na tabelkach, nie popieram, ale to na marginesie, może to jakieś legacy. Chociaż jeśli tych tabel nie ma dużo, to może przerobić na flexa, tak jak @Xarviel dał przykład.

FukurouPL napisał(a):

Tylko, że ja mam cały template w tabeli

Możesz owinąć tabele w flexboxa, żaden problem

<div class="wrapper">
  <table>
     ...
  </table>

  <table>
     ...
  </table>
</div>

tylko analogicznie jak w przykładzie wcześniej tabela nie może mieć żadnego marginesu.

Przy podejściu wykorzystującym :last-child też dobrze byłoby to wszystko zawinąć w dodatkowy znacznik, żeby mieć pewność że w przyszłości nasz selektor zadziała

<div class="wrapper-2">
  <div class="news-item">
    <table>
      ...
    </table>
  </div>

  <div class="news-item">
    <table>
      ...
    </table>
  </div>
</div>