:first-child i :last-child nie działa Opcje

[siutek]

Witam,
tworzę sobie widok tabelaryczny z następującym układem:

[HTML] pobierz, plaintext 
<div class="postsDiv">
  <div class="postRow">1</div>
  <div class="postRow">2</div>
  <div class="postRow">3</div>
</div>
[HTML] pobierz, plaintext 

css:

[HTML] pobierz, plaintext 
.postsDiv {
    width: ~"calc(100% - 100px)";
    padding: 20px 50px;
    text-align: center;
}
.postRow {
      background-color: #fff;
      border-radius: 5px;
      padding: 15px;
      margin-bottom: 10px;
      text-align: left;
      font-size: 14px;
      border-bottom: 2px solid transparent;
}
.postRow:first-child {
     margin-top:30px;
}
.postRow:last-child {
     margin-bottom:30px;
}
[HTML] pobierz, plaintext 

zapisałem calc w taki a nie inny sposób gdyż do generowania cssa korzystam z lessa


Chciałbym aby nad pierwszym elementem na liście zawsze był margines 30px, ten sam odstęp musi się znajdować pod ostatnim elementem. Dlatego wykorzystałem następujący zapis:

Niestety instrukcje first-child i last-child nie działają :/

Drugie pytanie:

Jak zrobić by mając tylko jeden element z klasą .postRow zastosowanie do niego miała pseudoklasa zarówno first-child jak i last:child? Tak by przy jednym wyświetlanym wierszu nad nim i pod nim był margines?

[trueblue]

Gdybyś od razu pokazał cały kod, byłoby łatwiej.
Nie :first-child i :last-child, a :first-of-type i :last-of-type.

[siutek]

Gdybyś od razu pokazał cały kod, byłoby łatwiej.
Nie :first-child i :last-child, a :first-of-type i :last-of-type.

Pięknie! teraz działa, wytłumacz mi tylko dlaczego musiałem zastosować .postRow:first-of-type a nie .postRow:first-child? Przecież nawet biorąc pod uwagę, że tam były buttony, to nie miały one klasy .postRow, a first-child i last-child miały się odnosić tylko do elementów z klasą .postRow. Chyba, że dla nich klasa nie ma znaczenia. odnoszą się do pierwszego i ostatniego dziecka, bez względu na to jaką klasę wskażę przed :