LESS nested rule for selecting all except a pseudo element

Question

I'm writing a LESS nested rule that at the moment looks like this:

.content {
     margin-bottom: 30px;
     &:last-child {
        margin-bottom: 0;
     }
}

But I want to do it with a not selector and not have to define the margin twice. I don't want to have to reset in the last-child-selector.

What I want to do is something like this:

.content {
   &:not(:last-child) {
        margin-bottom: 30px;
   }
}

Resulting CSS:

.content:not(:last-child) {
    margin-bottom: 30px;
}

But my syntax seems wrong, cause it's not working, no elements get a bottom margin of 30px.

I haven't used the not-selector before, so I'm a little uncertain about the syntax. Is it possible to do and if yes, how?

How do I write a rule in LESS syntax that selects every child element of a particular div, except the last one?

Answer 1

First, some terminology to clarify: selectors never match pseudo-elements. In your case, :last-child is a pseudo-class, not a pseudo-element.

A pseudo-class acts like a class selector or an ID selector or a type selector, in that all of them match elements, and they act directly on whichever element you attach them to. These are all known as simple selectors. In fact, :not() itself is also a pseudo-class — which just happens to accept a simple selector as an argument, such as another pseudo-class.

A pseudo-element on the other hand is a separate concept from an element entirely. A pseudo-element is special in that it is not a simple selector, and therefore a selector will never actually match or apply styles to a pseudo-element unless you specify that pseudo-element.

Now, what the selector .content:not(:last-child) means is

Select any element
that has a class content
and is not the last child of its parent.

But that's not what you're trying to do. You're trying to select all but the last child of .content, so you need to separate them with a combinator. The most appropriate one to use is, of course, the child combinator:

.content {
    > :not(:last-child) {
        margin-bottom: 30px;
    }
}

This will compile to:

.content > :not(:last-child) {
    margin-bottom: 30px;
}