Можно ли сделать так, чтобы последние p в указанном классе c div имели спецификацию c css?

Question

Чтобы последние p не имели полей, вы можете сделать last-of-type, однако это не сработает, когда вы начнете вкладывать p в другие divs.

можно указать c css для последнего p в указанном классе?

Например:

<div class="my-container">
  <div class="banner-message1">
    <p>1</p>
  </div>
  <div class="banner-message2">
    <p>2</p>
  </div>
</div>

Чтобы конкретно сделать так, чтобы <p>2</p> имел определенный стиль, но не <p>1</p>

css из div.my-container p:last-of-type, казалось бы, применимо как к <p>1</p>, так и к <p>2</p>, так как они являются последними p в родительском div ( в этом случае banner-message1 и banner-message2)

https://jsfiddle.net/hygzq3ab/

Вот jsfiddle, у которого есть и нижнее поле на последнем теге p а затем также заполнение контейнера, так что последний элемент p выглядит по существу так, как будто он имеет двойное нижнее поле. last-of-type, похоже, не работает, поскольку он содержится в других классах div.

Пример кода для этого будет div.my-container p:last-of-type { margin-bottom:0; }

Answer 1

Если <p> всегда содержится в <div>, тогда вы можете нацелить этот абзац с помощью

.my-container > div:last-of-type p {
    margin-bottom: 0;
}

. Вам нужно нацелить абзац внутри последнего элемента div (также :last-child вместо :last-of-type также будет работать в этом конкретном c примере).

---

Но если ваш последний <p> не всегда содержится в <div>, вы можете указать его с помощью

.my-container > div:last-child p,
.my-container > p:last-child {
    margin-bottom: 0;
}

Здесь вы должны использовать :last-child вместо :last-of-type или - если последний <p> не обернут в его собственный <div> - вы также нацеливаетесь на абзац, содержащийся в последний <div>

Answer 2

Вы также должны использовать это: last:child

 .my-container > div:last-child p {
        margin-bottom: 0;
    }

Answer 3

Это то, что вы просите?

html (у вашей скрипки много идентификаторов одного и того же элемента)

<div class="my-container">
<div class="banner-message">
  <p>
  1
  </p>
</div>
<div class="banner-message">
  <p>
  2a
  </p><p>
  2b
  </p>
</div>
<div class="banner-message">
<p>
aaa
</p>
</p>
  <p>
  3
  </p>
</div>
</div>

и css:

.banner-message:last-child p:last-child {
  color: red
}

Нужно сделать трюк