Почему не работает второй :last-child?

Question

[Сергей Громов]

Есть вот такой html

<section class="contact">
		<h3>Contact Us</h3>
		<h2>Work With Us</h2>
		<img src="img/map.png" alt="">
		<div>
			<h3>location</h3>
			<span class="address">198 West 21th Street, New York, NY 10010</span>
			<h3>Fax</h3>
			<span class="phone">[phone]</span>
			<span class="phone">[phone]</span>
		</div>
		<div>
			<h3>phone</h3>
			<span class="phone">[phone]</span>
			<span class="phone">[phone]</span>
			<h3>email</h3>
			<span>[e-mail]</span>
			<span>[e-mail]</span>
		</div>
	</section>

И вот такой вот Sass (SCSS)

.contact{
    div{
      .phone{
        min-width: 70%;
        display: inline-block;
      }
      &:nth-of-type(1) h3:nth-of-type(2){
        color: #000;
        margin: 87px 0 0 0;
      }
      &:nth-of-type(1) .phone{
        margin-top: 38px;
      }
      &:nth-of-type(1) .phone:last-child{
        margin-top: 8px;
      }
      &:nth-of-type(2) .phone{
        margin-top: 38px;
      }
      &:nth-of-type(2) .phone:last-child{
        margin-top: 8px;
      }
    }
}

И вроде все нормально работает, за исключение последнего правила

&:nth-of-type(2) .phone:last-child{
        margin-top: 8px;
      }

Почему это работает.

&:nth-of-type(1) .phone:last-child{
        margin-top: 8px;
      }

а вот это строкой ниже уже нет

&:nth-of-type(2) .phone:last-child{
        margin-top: 8px;
      }

Answer 1

[MNB]

потому что он не last-child. После него есть элементы.

Answer 2

[Maxim Zhgulev]

.phone в последнем блоке не является :last-child (не является последним дочерним) - поэтому и не срабатывает

Answer 3

[Максим Тимофеев]

.phone:last-child - это последний детеныш внутри .phone, а у Вас таких нет
Тут видимо надо .phone:last-of-type

Comments

[Сергей Громов]

Нет, &:nth-of-type(2) .phone:last-child это значит 2рой DIV а в нем найти последний элемент с классом .phone

[Maxim Zhgulev]

.phone:last-child - это не последний "детеныш" внутри .phone, а .phone, который по совместительству является последним дочерним в div