CODEWITHSUNDEEP
csssass
Ziiiijun
Ziiiijun

Reputation: 3

pseudo code in scss - use not to select everything except last child

I am totally new to scss, and confuse about the :first in scss,

I have the index.html code as below,

<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>

I try to select every paragraph except the last one as follow, but it actually match all paragraph, can you tell me the reason?

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

Upvotes: 0

Views: 74

Answers (1)

Terry
Terry

Reputation: 66123

You can't: the CSS pseudo-selector :last-child does not work like that. The :last-child applies to the last child element in the parent element. In your case, since .paragraph is not a last child, it will not be selected. You want to use :last-of-type instead:

.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>

Upvotes: 2

Related Questions