CODEWITHSUNDEEP
csssass
Julie
Julie

Reputation: 17

Not selector does not behave like it should

This is my HTML Code

<div class="col-1-of-2">
            <h3 class="heading-tertiary u-margin-bottom-small">
              You're going to fall in love with nature
            </h3>
            <p class="paragraph">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <h3 class="heading-tertiary u-margin-bottom-small">
              Live adventure like you never have before
            </h3>
            <p class="paragraph">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <a href="#" class="btn-text">Learn More &rarr;</a>
          </div>

Now here I'm applying CSS styling on paragraph class like this

.paragraph{
  font-size: 1.6rem;
  &:not(:last-child)
  {
    margin-bottom: 3rem;
  }
}

But It still apply margin bottom to the last paragraph have a look here

enter image description here

Am I doing anything wrong, Please guide me in right direction Thanks

Upvotes: 0

Views: 20

Answers (1)

Y.T.
Y.T.

Reputation: 2739

You can't target the last instance of the class name in your list without JS. You can only target the last tag

p:not(:last-of-type) {
    margin-bottom: 3rem;
}

Read How do I select the "last child" with a specific class name in CSS?

Upvotes: 1

Related Questions