Как удалить нижнюю границу дочернего элемента в последнем элементе набора?

Question

Как мне удалить margin-bottom из p в последнем элементе контейнера с помощью .col-md-2?

p {
  margin: 0;
}
.col-md-2 p {
  margin-bottom: 15px;
}

<div class="col-md-2-wrap">
  <div class="col-md-2">
    <p>lorum ipsumlorum ipsumlorum ipsumlorum ipsumlorum ipsumlorum ipsum</p>
    <p>lorum ipsumlorum ipsum</p>
  </div>
  <div class="col-md-2">
    <p>lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p>
    <p>lorum ipsumlorum ipsumlorum ipsumlorum ipsum</p>
  </div>
</div>

Что мне следует использовать - селектор nth-child или last-of-type? Я не могу понять, как использовать их в моей ситуации.

html css

0

waisie li 6 Сен 2016 в 21:46

Answer 1

Вы можете дважды использовать селектор last-child, попробуйте следующее:

.col-md-2-wrap div:last-child p:last-child {
  margin:0;
}

.col-md-2-wrap ... Нацельте на оболочку.
div: last-child ... Таргетинг на последний .col-md-2 внутри оболочки
p: last-child ... Нацельтесь на последний p внутри последнего .col-md-2

.col-md-2-wrap {
  background: purple;
  color: white;
}
p {
  margin: 0;
}
.col-md-2 p {
  margin-bottom: 15px;
}
.next {
  background: gold;
  height: 50px;
}
.col-md-2-wrap div:last-child p:last-child {
  margin: 0;
}

<div class="col-md-2-wrap">
  <div class="col-md-2">
    <p>lorum ipsumlorum ipsumlorum ipsumlorum ipsumlorum ipsumlorum ipsum</p>
    <p>lorum ipsumlorum ipsum</p>
  </div>
  <div class="col-md-2">
    <p>lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p>
    <p>lorum ipsumlorum ipsumlorum ipsumlorum ipsum</p>
  </div>
</div>
<div class="next"></div>

0

DaniP 6 Сен 2016 в 18:55

Answer 2

Лично я бы просто добавил еще одно правило, чтобы указать «Последний p из последнего col-md-2 должен иметь 0 полей», например:

p {
  margin: 0;
}

.col-md-2 p {
  margin-bottom: 15px;
}

.col-md-2:last-of-type p:last-child {
  margin-bottom: 0px;
}

Если вы по той или иной причине не хотели этого делать, вы можете сделать следующее:

p {
  margin: 0;
}

.col-md-2:not(:last-of-type) p, .col-md-2:last-of-type p:not(:last-child) {
  margin-bottom: 15px;
}

Он состоит из двух частей:

.col-md-2:not(:last-of-type) p применяет маржу ко всем p, кроме тех, которые встречаются в последнем col-md-2
.col-md-2:last-of-type p:not(:last-child) применяет его ко всем p из последнего col-md-2, кроме самого последнего p.

1

Tyler Roper 6 Сен 2016 в 18:58

Answer 3

.col-md-2:last-child > p:last-child {
  margin-bottom: 0px;
}

0

LLuca 6 Сен 2016 в 19:05

Как удалить нижнюю границу дочернего элемента в последнем элементе набора?

3 ответа

Похожие вопросы

Новые вопросы

html