псевдокод в s css - используйте, чтобы не выбирать все, кроме последнего потомка

Question

Я совершенно новичок в s css, и запутался насчет: сначала в s css,

У меня есть индекс. html код, как показано ниже,

<div class="col-1-of-2 test">
    <h3 class="heading-tertiary u-margin-bottom-small">You are going to fall in love with nature</h3>
    <p class="paragraph">asdasdasd</p>

    <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
    <p class="paragraph">asdsad</p>

    <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
    <p class="paragraph">asdsad</p>

    <a href="#" class="btn-text">Click</a>
</div>

Я пытаюсь выбрать каждый абзац, кроме последнего, следующим образом, но на самом деле он соответствует всем абзацам, можете ли вы сказать мне причину?

.paragraph {
    &:not(:last-child) {
        border: 1px solid green;
    }
}

Answer 1

Вы не можете: псевдо-селектор CSS :last-child не работает так. :last-child применяется к последнему дочернему элементу в родительском элементе. В вашем случае, поскольку .paragraph не последний ребенок, он не будет выбран. Вы хотите использовать :last-of-type вместо:

.paragraph:not(:last-of-type) {
  border: 1px solid green;
}

<div class="col-1-of-2 test">
  <h3 class="heading-tertiary u-margin-bottom-small">You are going to fall in love with nature</h3>
  <p class="paragraph">asdasdasd</p>

  <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
  <p class="paragraph">asdsad</p>

  <h3 class="heading-tertiary u-margin-bottom-small">Live adventures like you never have before</h3>
  <p class="paragraph">asdsad</p>

  <a href="#" class="btn-text">Click</a>
</div>